我有一个100%宽度的表,有3列.中心列的宽度必须为600px.如何在占用剩余空间的同时使另外两个宽度相等?
<table style="width: 100%"> <tr> <td>left</td> <td style="width: 600px">center</td> <td>right</td> </tr> </table>
目前,根据左列或右列的内容,它们总是不均匀的.我尝试在左右两侧设置50%的宽度以及其他数字和最小宽度试验.
请不要jquery / javascript.谢谢
解决方法
这个老问题的新答案.
>给中间列增加最大宽度和最小宽度而不是宽度
>左右宽度为50%.
>根本不要给桌子宽度.
我已将此示例中间列宽修复为300px.
CSS
table { border-collapse: collapse; } th,td { border: solid 1px #CCC; padding: 10px; } .fixed { max-width: 300px; min-width: 300px; } .fluid { width: 50%; }
HTML
<table> <thead> <tr> <th class="fluid">First Column</th> <th class="fixed">Fixed Column</th> <th class="fluid">Third Column</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>