表与3列。固定中心列宽度。如何在其他两列有共享宽度? [英] Table with 3 columns. Fixed center column width. How to have shared width on other two columns?
问题描述
我有一个100%宽度的表有3列。中心列的宽度必须为600像素。在使用剩余空间时,如何使其他两个等宽?
i have a 100% width table with 3 columns. The center column must be 600px width. How can I have the other two equal width while using up the remaining space?
<table style="width: 100%">
<tr>
<td>left</td>
<td style="width: 600px">center</td>
<td>right</td>
</tr>
</table>
目前,根据左侧或右侧列的内容,它们总是不均匀。我已经尝试在左右设置50%的宽度以及其他数字和最小宽度的试验。
Currently, depending on the content of left or right columns, they are always uneven. I have tried setting 50% width on the left and right as well as other numbers and min-width trials.
请不要jquery / javascript。谢谢
Please no jquery/javascript. Thank you
推荐答案
这个旧问题的新答案。
New answer to this old question.
- 提供中间列
th
amin-width
而不是宽度
- 给予
50%的左和右
th
awidth
>。 - 不要给予
表
awidth
- Give the middle column
th
amax-width
andmin-width
instead ofwidth
- Give the left and right
th
awidth
of50%
. - Don't give the
table
awidth
at all.
我已经固定这个范例中间栏 width
在 300px
。
I have fixed this examples middle column width
at 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>
这篇关于表与3列。固定中心列宽度。如何在其他两列有共享宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!