HTML 表格，第一列和最后一列固定宽度，列之间是动态的，但宽度相等
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6872727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Table, first and last column fixed width and columns between dynamic, but equal width
提问by thobens
Is it possible to have a table with width 100% (so the table fits the screen size), where the first and the last column have a fixed width, and the columns between take the rest, both 50%.
是否有可能有一个宽度为 100% 的表格（因此表格适合屏幕尺寸），其中第一列和最后一列具有固定宽度，之间的列占据其余部分，均为 50%。
Like:
喜欢：
+--------------------+--------------------------------------+--------------------------------------+------------+
| width:300px; | with dynamic, equals next column | width dynamic, equals prevous column | width:50px;|
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
采纳答案by Janez
What about using jQuery for this and calling javascript function once your table is created or some other event (like click) happens?
在创建表或发生其他事件（如单击）后，为此使用 jQuery 并调用 javascript 函数怎么样？
See here(I created jsfiddle playground for this)
见这里（我为此创建了 jsfiddle 游乐场）
What it does is that it checks the width of fixed elements (width of the whole table, first and last cell). Then it calculates and assigns the width for the rest of the cells which should have the remaining width divided between them (based on how many there are and how much space is left). Of course this is just quick example of possible solution. It needs polishing (checking null objects, if remaining width is greater than 0, ...)
它的作用是检查固定元素的宽度（整个表格的宽度，第一个和最后一个单元格的宽度）。然后它计算并分配剩余单元格的宽度，这些单元格应该在它们之间划分剩余宽度（基于有多少以及剩余多少空间）。当然，这只是可能的解决方案的快速示例。它需要抛光（检查空对象，如果剩余宽度大于 0，...）
回答by Bazzz
Try this:
尝试这个：
As you can see the two centre column remain equal sized, due to the table-layout:fixed, even when the content is of different length. Try adding more and less content to the two centre columns.
正如您所看到的，由于table-layout:fixed，即使内容的长度不同，两个中心列的大小也保持相同。尝试向中间的两列添加更多或更少的内容。
JSFiddle: http://jsfiddle.net/RtXSh/
JSFiddle：http: //jsfiddle.net/RtXSh/
CSS
CSS
table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td {
border: 1px solid #333;
}
HTML
HTML
<table>
<tr>
<td style="width:300px;">
test
</td>
<td>
test test tes test test
</td>
<td>
test
</td>
<td style="width:50px;">
test
</td>
</tr>
</table>
回答by Gilles Lesire
Try using the pseudo element first-child and last-child
尝试使用伪元素 first-child 和 last-child
If I'm not mistaken the other columns will align equally by themselves. You might need to use the !important statement behind the first-child and last-child widths.
如果我没记错的话，其他列会自己对齐。您可能需要在 first-child 和 last-child 宽度后面使用 !important 语句。
table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
td:first-child{ width: 100px; }
td:last-child{ width: 100px; }<table>
<tr>
<td>100px</td>
<td>some text</td>
<td>some text</td>
<td>100px</td>
</tr>
</table>However, as nurettin pointed out, if you use a thead and tbody section you have to style the header. Styling the td:first-child and td:last-child will not work.
但是，正如 nurettin 指出的那样，如果您使用 thead 和 tbody 部分，则必须设置标题的样式。td:first-child 和 td:last-child 样式将不起作用。
table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
th:first-child{ width: 100px; }
th:last-child{ width: 100px; }<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>100px</td>
<td>some text</td>
<td>some text</td>
<td>100px</td>
</tr>
</tbody>
</table>回答by Roman
In my opinion, the simple, nice and easy way is that don't use the px and % together. If you are using table width 100%, then define width of first and last column in % as well. If you are interested in that, here is how you can do:
在我看来，简单、漂亮和简单的方法是不要一起使用 px 和 %。如果您使用 100% 的表格宽度，那么同样以 % 定义第一列和最后一列的宽度。如果您对此感兴趣，您可以这样做：
CSS:
CSS：
.mytable {
width:100%;
border: 1px solid green;
}
.left{
width:30%;
border-right:1px dashed blue;
}
.mid1{
width:30%;
border-right:1px dashed blue;
}
.mid2{
width:30%;
border-right:1px dashed blue;
}
.right{
width: 10%;
border-left:1px dashed blue;
}
HTML:
HTML：
<table class="mytable">
<tr>
<td class="left">Left Column, 30%</td>
<td class="mid1">Mid 1, 30% </td>
<td class="mid2">Mid 2, 30% </td>
<td class="right">Right, 10%</td>
</tr>
</table>
回答by nurettin
Nobody mentioned this one here <th>trick:
没有人在这里提到这个<th>技巧：
table{ table-layout: fixed; width: 100%; }
th:first-child{ width: 300px; }
<table>
<thead>
<tr>
<th>yourfirst300pxcolumn</th>
<th>fixedwidth</th>
<th>fixedwidth also</th>
</tr>
</thead>
<tbody>
<tr><td>300</td><td>something</td><td>something else</td></tr>
</tbody>
</table>
回答by David Moles
Note that in HTML5/CSS3, you can use grid layoutto have more control over your tables. It's not that useful for this specific example, with pixel widths, where you can use table-layout:fixedas in Bazzz's answer, but it is useful if you want to use something like min-content.
请注意，在 HTML5/CSS3 中，您可以使用网格布局来更好地控制您的表格。对于这个特定示例，像素宽度并不是那么有用，您可以table-layout:fixed在Bazzz 的答案中使用，但如果您想使用类似min-content.
The following works out of the box on Chrome and Firefox, but not in Safari:
以下内容在 Chrome 和 Firefox 上开箱即用，但不适用于 Safari：
table {
width: 100%;
display: grid;
grid-template-columns: 300px 1fr 1fr 50px;
/* Or, more usefully: */
/* grid-template-columns: min-content 1fr 1fr min-content; */
}
td {
display: block;
}
/* ignore <tr> when laying out the grid; just lay out the cells */
tr {
display: contents;
}
/* browsers can inject <tbody> into the DOM even if it's not in the HTML */
tbody {
display: contents;
}
(Note though that the table border-collapseproperty doesn't work in this layout, so you may have to fiddle with CSS pseudo-classes like :last-childin order to get your borders to behave the way you want.)
（请注意，尽管 tableborder-collapse属性在此布局中不起作用，因此您可能必须摆弄 CSS 伪类，例如:last-child以使您的边框按照您想要的方式运行。）
In Safari this doesn't work -- the rows don't break properly. (Although it does work if you use nested <div>elements instead of a <table>and apply similar styles.) However, a simpler layout with just one dynamic 1frcolumn does work in Safari:
在 Safari 中，这不起作用——行没有正确中断。（尽管如果您使用嵌套<div>元素而不是 a<table>并应用类似的样式，它确实有效。）但是，只有一个动态1fr列的更简单的布局在 Safari 中确实有效：
table {
display: grid;
grid-template-columns: 300px 1fr 50px;
}
tbody {
display: contents;
}
tr {
display: contents;
}
td {
border: 1px solid #c0c0c0;
}
回答by M Lea
This can be handled by adding the style table-layout:fixedto the table element, and simply not specifying any width value for the columns you wish to evenly divide the width remaining after the fixed columns have been accounted for.
这可以通过将样式table-layout:fixed 添加到 table 元素来处理，并且简单地不指定任何宽度值的列，您希望在固定列被考虑后均匀划分剩余的宽度。
Further, using combinations of <colgroup>can provide robust variable-width scenarios.
此外，使用 的组合<colgroup>可以提供强大的可变宽度场景。
I've created an example at JSFiddle: https://jsfiddle.net/3bgsfnuL/1/
我在 JSFiddle 创建了一个例子：https://jsfiddle.net/3bgsfnuL/1/
<div style="position:relative; height:500px; width:100%;">
<table style="height:100%; width:100%; table-layout:fixed; text-align:center; border-collapse:collapse;">
<colgroup colspan="1" style="width:200px"></colgroup>
<colgroup colspan="3">
<col/>
<col style="width:30px"/>
<col/>
</colgroup>
<colgroup colspan="1" style="width:200px"></colgroup>
<tbody>
<tr>
<td style="background-color:silver;">left fixed</td>
<td style="border-right:1px solid black;">col 1</td>
<td style="background-color:red; color:white; border:1px solid black;">col 2</td>
<td style="border-left:1px solid black;">col 3</td>
<td style="background-color:silver;">right fixed</td>
</tr>
</tbody>
</table>
</div>