table嵌套实现的左侧第一列固定，右侧可横向滑动样式
废话不多说直接上代码。
----body部分-----
1 <div id="main"> 2 <table> 3 <tr> 4 <td> 5 <div style="margin: 0;padding: 0;"> 6 <table class="left" cellspacing="0"> 7 <tr class="title"> 8 <td class="name_bg">员工信息</td> 9 </tr> 10 <tr> 11 <td>张三</td> 12 </tr> 13 <tr> 14 <td>张三</td> 15 </tr> 16 <tr> 17 <td>张三</td> 18 </tr> 19 <tr> 20 <td>张三</td> 21 </tr> 22 <tr> 23 <td>张三</td> 24 </tr> 25 <tr> 26 <td>张三</td> 27 </tr> 28 <tr> 29 <td>张三</td> 30 </tr> 31 </table> 32 </div> 33 </td> 34 <td> 35 <div class="box" style="overflow-x: scroll;width: 1200px;"> 36 <table class="right"> 37 <tr class="title"> 38 <td>几月几号周几</td> 39 <td>几月几号周几</td> 40 <td>几月几号周几</td> 41 <td>几月几号周几</td> 42 <td>几月几号周几</td> 43 <td>几月几号周几</td> 44 <td>几月几号周几</td> 45 <td>几月几号周几</td> 46 <td>9</td> 47 <td>10</td> 48 <td>11</td> 49 <td>12</td> 50 <td>13</td> 51 <td>14</td> 52 <td>15</td> 53 <td>16</td> 54 <td>17</td> 55 <td>18</td> 56 <td>19</td> 57 <td>20</td> 58 <td>21</td> 59 <td>22</td> 60 <td>23</td> 61 <td>24</td> 62 <td>25</td> 63 <td>26</td> 64 <td>27</td> 65 <td>28</td> 66 <td>29</td> 67 <td>30</td> 68 </tr> 69 <tr> 70 <td>状态状态</td> 71 <td>状态状态</td> 72 <td>状态状态</td> 73 <td>状态状态</td> 74 <td>状态状态</td> 75 <td>状态状态</td> 76 <td>状态状态</td> 77 <td>状态状态</td> 78 <td>状态状态</td> 79 <td>状态状态</td> 80 <td>状态状态</td> 81 <td>状态状态</td> 82 <td>状态状态</td> 83 <td>状态状态</td> 84 <td>状态状态</td> 85 <td>状态状态</td> 86 <td>状态状态</td> 87 <td>状态状态</td> 88 <td>状态状态</td> 89 <td>状态状态</td> 90 <td>状态状态</td> 91 <td>状态</td> 92 <td>状态</td> 93 <td>状态</td> 94 <td>状态</td> 95 <td>状态</td> 96 <td>状态</td> 97 <td>状态</td> 98 <td>状态</td> 99 <td>状态</td> 100 </tr> 101 <tr> 102 <td>状态状态</td> 103 <td>状态状态</td> 104 <td>状态状态</td> 105 <td>状态状态</td> 106 <td>状态状态</td> 107 <td>状态状态</td> 108 <td>状态状态</td> 109 <td>状态状态</td> 110 <td>状态状态</td> 111 <td>状态状态</td> 112 <td>状态状态</td> 113 <td>状态状态</td> 114 <td>状态状态</td> 115 <td>状态状态</td> 116 <td>状态状态</td> 117 <td>状态状态</td> 118 <td>状态状态</td> 119 <td>状态状态</td> 120 <td>状态状态</td> 121 <td>状态状态</td> 122 <td>状态状态</td> 123 <td>状态</td> 124 <td>状态</td> 125 <td>状态</td> 126 <td>状态</td> 127 <td>状态</td> 128 <td>状态</td> 129 <td>状态</td> 130 <td>状态</td> 131 <td>状态</td> 132 </tr> 133 <tr> 134 <td>状态状态</td> 135 <td>状态状态</td> 136 <td>状态状态</td> 137 <td>状态状态</td> 138 <td>状态状态</td> 139 <td>状态状态</td> 140 <td>状态状态</td> 141 <td>状态状态</td> 142 <td>状态状态</td> 143 <td>状态状态</td> 144 <td>状态状态</td> 145 <td>状态状态</td> 146 <td>状态状态</td> 147 <td>状态状态</td> 148 <td>状态状态</td> 149 <td>状态状态</td> 150 <td>状态状态</td> 151 <td>状态状态</td> 152 <td>状态状态</td> 153 <td>状态状态</td> 154 <td>状态状态</td> 155 <td>状态</td> 156 <td>状态</td> 157 <td>状态</td> 158 <td>状态</td> 159 <td>状态</td> 160 <td>状态</td> 161 <td>状态</td> 162 <td>状态</td> 163 <td>状态</td> 164 </tr> 165 <tr> 166 <td>状态状态</td> 167 <td>状态状态</td> 168 <td>状态状态</td> 169 <td>状态状态</td> 170 <td>状态状态</td> 171 <td>状态状态</td> 172 <td>状态状态</td> 173 <td>状态状态</td> 174 <td>状态状态</td> 175 <td>状态状态</td> 176 <td>状态状态</td> 177 <td>状态状态</td> 178 <td>状态状态</td> 179 <td>状态状态</td> 180 <td>状态状态</td> 181 <td>状态状态</td> 182 <td>状态状态</td> 183 <td>状态状态</td> 184 <td>状态状态</td> 185 <td>状态状态</td> 186 <td>状态状态</td> 187 <td>状态</td> 188 <td>状态</td> 189 <td>状态</td> 190 <td>状态</td> 191 <td>状态</td> 192 <td>状态</td> 193 <td>状态</td> 194 <td>状态</td> 195 <td>状态</td> 196 </tr> 197 <tr> 198 <td>状态状态</td> 199 <td>状态状态</td> 200 <td>状态状态</td> 201 <td>状态状态</td> 202 <td>状态状态</td> 203 <td>状态状态</td> 204 <td>状态状态</td> 205 <td>状态状态</td> 206 <td>状态状态</td> 207 <td>状态状态</td> 208 <td>状态状态</td> 209 <td>状态状态</td> 210 <td>状态状态</td> 211 <td>状态状态</td> 212 <td>状态状态</td> 213 <td>状态状态</td> 214 <td>状态状态</td> 215 <td>状态状态</td> 216 <td>状态状态</td> 217 <td>状态状态</td> 218 <td>状态状态</td> 219 <td>状态</td> 220 <td>状态</td> 221 <td>状态</td> 222 <td>状态</td> 223 <td>状态</td> 224 <td>状态</td> 225 <td>状态</td> 226 <td>状态</td> 227 <td>状态</td> 228 </tr> 229 <tr> 230 <td>状态状态</td> 231 <td>状态状态</td> 232 <td>状态状态</td> 233 <td>状态状态</td> 234 <td>状态状态</td> 235 <td>状态状态</td> 236 <td>状态状态</td> 237 <td>状态状态</td> 238 <td>状态状态</td> 239 <td>状态状态</td> 240 <td>状态状态</td> 241 <td>状态状态</td> 242 <td>状态状态</td> 243 <td>状态状态</td> 244 <td>状态状态</td> 245 <td>状态状态</td> 246 <td>状态状态</td> 247 <td>状态状态</td> 248 <td>状态状态</td> 249 <td>状态状态</td> 250 <td>状态状态</td> 251 <td>状态</td> 252 <td>状态</td> 253 <td>状态</td> 254 <td>状态</td> 255 <td>状态</td> 256 <td>状态</td> 257 <td>状态</td> 258 <td>状态</td> 259 <td>状态</td> 260 </tr> 261 <tr> 262 <td>状态状态</td> 263 <td>状态状态</td> 264 <td>状态状态</td> 265 <td>状态状态</td> 266 <td>状态状态</td> 267 <td>状态状态</td> 268 <td>状态状态</td> 269 <td>状态状态</td> 270 <td>状态状态</td> 271 <td>状态状态</td> 272 <td>状态状态</td> 273 <td>状态状态</td> 274 <td>状态状态</td> 275 <td>状态状态</td> 276 <td>状态状态</td> 277 <td>状态状态</td> 278 <td>状态状态</td> 279 <td>状态状态</td> 280 <td>状态状态</td> 281 <td>状态状态</td> 282 <td>状态状态</td> 283 <td>状态</td> 284 <td>状态</td> 285 <td>状态</td> 286 <td>状态</td> 287 <td>状态</td> 288 <td>状态</td> 289 <td>状态</td> 290 <td>状态</td> 291 <td>状态</td> 292 </tr> 293 </table> 294 </div> 295 </td> 296 </tr> 297 </table> 298 </div>
-------样式部分------
1 <style type="text/css"> 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 body { 7 font-family: "微软雅黑"; 8 font-size: 12px; 9 color: #666; 10 } 11 table { 12 empty-cells: show; 13 border-collapse: collapse; 14 border: none; 15 text-align: center; 16 overflow-x: scroll; 17 } 18 /*通过设置以上属性设置table的border就比较简单了*/ 19 20 table.right { 21 table-layout: fixed; 22 width: 1200px; 23 /*通过设置table的宽以及table-layout属性，可以自定义td的宽高*/ 24 } 25 table.left td, 26 table.right td { 27 width: 120px; 28 height: 40px; 29 line-height: 40px; 30 border: 1px #eee solid; 31 } 32 table.left td { 33 background: #FFAE3B; 34 color: #fff; 35 } 36 .title { 37 background: #71D5FF; 38 color: #fff; 39 } 40 .box { 41 position: relative; 42 top: 8px; 43 left: -2px; 44 } 45 </style>
文章来自：http://www.cnblogs.com/zhumengli-ly/p/4364541.html