HTML表格 - 表格宽度100％时保持列宽比例
Posted
技术标签:
【中文标题】HTML表格 - 表格宽度100％时保持列宽比例【英文标题】：HTML Table - Maintain column width proportion when table width 100% 【发布时间】：2018-02-25 02:34:42 【问题描述】：默认的 html <table> 元素似乎可以直接设置我想要/期望的列宽。当我尝试将整个表格宽度设置为 100% 时会出现问题，在这种情况下，每个合理大小的列都会对齐到总宽度的 1/n %。
这是我所说的一个例子
第二张桌子看起来很糟糕。绝对没有必要在第一列开始换行，尤其是当现在有 更多 可用空间时。
唯一的区别是第二个表设置为width:100%。当然，您可以在每列上设置精确的像素或百分比尺寸以相对于彼此进行缩放，但这开始硬编码一些关于每列有多大的猜测工作。在这种情况下，只有 View 或 Edit 链接的列可以非常小，不需要占用任何额外的空间，而有些可以使用更多空间增长，例如可能具有其他更长/更短值的名称/类型。
问：我能否以某种方式保持成比例的列格式，同时允许将整个表格的大小调整为可用宽度的 100%？
Demo in jsFiddle
堆栈片段中的演示
table
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
table th
background: lightblue;
table th, table td
border: lightgrey 1px solid;
padding: .1em 0.2em;
<h4>Width Not Set</h4>
<table id="example1" >
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start</th>
<th>Stop</th>
<th>View</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Size Name</td>
<td>Order</td>
<td>01/01/2017</td>
<td>02/02/2017</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Adjustment</td>
<td>01/01/2017</td>
<td>04/03/2018</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Regular Size Name</td>
<td>Adjustment</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Order</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
</tbody>
</table>
<h4>Width 100%</h4>
<table id="example2" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start</th>
<th>Stop</th>
<th>View</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Size Name</td>
<td>Order</td>
<td>01/01/2017</td>
<td>02/02/2017</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Adjustment</td>
<td>01/01/2017</td>
<td>04/03/2018</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Regular Size Name</td>
<td>Adjustment</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Order</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
</tbody>
</table>【问题讨论】：
神秘的否决票？嘿，至少这里有一个minimal reproducible example 和一些现有的调试步骤。不要看到不知道的危害。 同意，也许这不是有史以来最有见地的 CSS 问题，但样本无可挑剔，问题也不是太明显，我认为table-layout 不在这个最常用的 CSS 列表中特性。我似乎有很多质量较差的问题，没有任何反对意见。
【参考方案1】：
像这样？
注意： 我从两个表中删除了width:100%，没有这个设置CSS效果最好！
代码来自旧的 SO 帖子。请参阅下文。
SO Answer
代码片段：
table
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
table th
background: lightblue;
table th,
table td
border: lightgrey 1px solid;
padding: .1em 0.2em;
tr td:last-child
width:1%;
white-space:nowrap;
<h4>Width Not Set</h4>
<table id="example1">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start</th>
<th>Stop</th>
<th>View</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Size Name</td>
<td>Order</td>
<td>01/01/2017</td>
<td>02/02/2017</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Adjustment</td>
<td>01/01/2017</td>
<td>04/03/2018</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Regular Size Name</td>
<td>Adjustment</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Order</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
</tbody>
</table>
<h4>Width 100%</h4>
<table id="example2">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start</th>
<th>Stop</th>
<th>View</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Size Name</td>
<td>Order</td>
<td>01/01/2017</td>
<td>02/02/2017</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Adjustment</td>
<td>01/01/2017</td>
<td>04/03/2018</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Regular Size Name</td>
<td>Adjustment</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Order</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
</tbody>
</table>
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO question:
<a href='https://***.com/q/46247387/1366033'>
HTML Table - Maintain column width proportion when table width 100%
</a>
</div>
https://jsfiddle.net/KyleMit/dabpc4sL/【讨论】：
【参考方案2】：这是一个解决方案的尝试
按原样利用表格的初始呈现来确定相对列大小。循环遍历每个并显式设置大小，以便一旦表格以编程方式将大小调整为 100%，它们将保持相同的比例
function LockColumnWidthAndResize($table)
$table.find('tr th').each(function()
$(this).width($(this).width())
);
$table.width("100%");
优点：不需要提前对内容的宽度进行硬编码缺点：小 Kludgy 并且有一些 Flash 的无样式内容。
Demo in jsFiddle
StackSnippets 中的演示
$(function()
LockColumnWidthAndResize($('#example2'))
function LockColumnWidthAndResize($table)
$table.find('tr th').each(function()
$(this).width($(this).width())
);
$table.width("100%");
);table
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
table th
background: lightblue;
table th, table td
border: lightgrey 1px solid;
padding: .1em 0.2em;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Width Not Set</h4>
<table id="example1" >
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start</th>
<th>Stop</th>
<th>View</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Size Name</td>
<td>Order</td>
<td>01/01/2017</td>
<td>02/02/2017</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Adjustment</td>
<td>01/01/2017</td>
<td>04/03/2018</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Regular Size Name</td>
<td>Adjustment</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Order</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
</tbody>
</table>
<h4>Width - Set 100% dynamically</h4>
<table id="example2">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start</th>
<th>Stop</th>
<th>View</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Size Name</td>
<td>Order</td>
<td>01/01/2017</td>
<td>02/02/2017</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Adjustment</td>
<td>01/01/2017</td>
<td>04/03/2018</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Regular Size Name</td>
<td>Adjustment</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Order</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
</tbody>
</table>【讨论】：
【参考方案3】：问题在于您添加到table 标记中的table-layout: fixed 规则，只需将其删除即可。来自w3schools：
水平布局只取决于表格的宽度和列的宽度，而不是单元格的内容 允许浏览器比自动表格布局更快地布置表格 一旦收到第一行，浏览器就可以开始显示表格了
fixed：固定表格布局算法：
table
border-collapse: collapse;
border-spacing: 0;
/*table-layout: fixed;*/
table th
background: lightblue;
table th, table td
border: lightgrey 1px solid;
padding: .1em 0.2em;
<h4>Width Not Set</h4>
<table id="example1" >
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start</th>
<th>Stop</th>
<th>View</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Size Name</td>
<td>Order</td>
<td>01/01/2017</td>
<td>02/02/2017</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Adjustment</td>
<td>01/01/2017</td>
<td>04/03/2018</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Regular Size Name</td>
<td>Adjustment</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Order</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
</tbody>
</table>
<h4>Width 100%</h4>
<table id="example2" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start</th>
<th>Stop</th>
<th>View</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Size Name</td>
<td>Order</td>
<td>01/01/2017</td>
<td>02/02/2017</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Adjustment</td>
<td>01/01/2017</td>
<td>04/03/2018</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Regular Size Name</td>
<td>Adjustment</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
<tr>
<td>Pretty Long Name Size Actually</td>
<td>Order</td>
<td>08/01/2017</td>
<td>02/02/2019</td>
<td><a href="#View">View</a></td>
<td><a href="#Edit">Edit</a></td>
</tr>
</tbody>
</table>【讨论】：
嗯，是的，就可以了。我尝试在开发工具中打开和关闭它以查看它是否产生任何影响，但我猜当时它已经渲染并下定决心。无论有没有它，我都应该从一开始就进行一次干净的运行。以上是关于HTML表格 - 表格宽度100％时保持列宽比例的主要内容，如果未能解决你的问题，请参考以下文章