最简单的方法实现部分列固定宽度,一列随着容器宽度自适应
table-layout: fixed ,并且这是部分固定宽度列的宽度,并且td overflow:hidden,防止溢出
并且table的宽度100%
DEMO 如下:实现随着页面的宽度的变化,中间一列的宽度变化(另外三列固定)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .firstLine,.thirdLine,.forthLine { width:100px; } .secondLine { } .myTable { overflow:hidden; width:100%; background-color: #ccc; table-layout: fixed } table td { overflow: hidden; } </style> </head> <body> <table class="myTable"> <tr> <td class="firstLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> <td class="secondLine">第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</td> <td class="thirdLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> <td class="forthLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> </tr> <tr> <td class="firstLine">第一行</td> <td class="secondLine">第二行</td> <td class="thirdLine">第三行</td> <td class="forthLine">第四行</td> </tr> </table> </body> <script> </script> </html>