我有一个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>