![](/img/trans.png)
[英]html table with 3 column, last column width flexible width. The first two columns share the remaining space with a fixed ratio of 25/75%
[英]HTML Table, first and last column fixed width and columns between dynamic, but equal width
是否可以使用宽度为100%的表格(因此表格适合屏幕大小),其中第一列和最后一列具有固定的宽度,其间的列取其余部分,均为50%。
喜欢:
+--------------------+--------------------------------------+--------------------------------------+------------+
| width:300px; | with dynamic, equals next column | width dynamic, equals prevous column | width:50px;|
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
尝试这个:
正如您所看到的那样,由于table-layout:fixed
,即使内容长度不同,两个中心列仍保持相同的大小。 尝试向两个中心列添加越来越少的内容。
JSFiddle: http : //jsfiddle.net/RtXSh/
CSS
table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td {
border: 1px solid #333;
}
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>
尝试使用伪元素first-child和last-child
如果我没有弄错的话,其他列将自行对齐。 您可能需要在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>
然而,正如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>
这可以通过添加样式表布局:固定到表元素来处理,而不是为希望均匀划分固定列之后剩余宽度的列指定任何宽度值。
此外,使用<colgroup>
组合可以提供可靠的可变宽度场景。
我在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>
没有人这里提到该一个<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>
在我看来,简单,好用和简单的方法是不要同时使用px和%。 如果您使用表格宽度100%,则还要以%为单位定义第一列和最后一列的宽度。 如果您对此感兴趣,请按以下步骤操作:
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:
<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>
那么在创建表格或其他一些事件(如点击)发生后,使用jQuery并调用javascript函数怎么样?
看到这里 (我为此创建了jsfiddle游乐场)
它的作用是检查固定元素的宽度(整个表格的宽度,第一个和最后一个单元格)。 然后它计算并指定其余单元格的宽度,这些单元格应该具有在它们之间划分的剩余宽度(基于剩余的数量和剩余的空间)。 当然,这只是可能解决方案的快速示例。 它需要抛光(检查空对象,如果剩余宽度大于0,......)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.