Html CSS 表格列自动宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4757844/
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
CSS table column autowidth
提问by ShaneKm
Given the following how do i make my last column auto size to its content? (The last column should autosize-width to the content. Suppose i have only 1 li element it should shrink vs. having 3 li elements etc):
鉴于以下内容，我如何使我的最后一列自动调整其内容大小？（最后一列应该根据内容自动调整宽度。假设我只有 1 个 li 元素，它应该缩小与 3 个 li 元素等相比）：
<table cellspacing="0" cellpadding="0" border="0">
<thead><!-- universal table heading -->
<tr>
<td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
<td class="tc">Type</td>
<th>File</th>
<th>Sample</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
<td>Division 4</td>
<td>Division 5</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
<td>Division 4</td>
<td class="last">
<ul class="actions">
<li><a class="iconStats" href="#">Statystyki</a></li>
<li><a class="iconEdit" href="#">Edytuj</a></li>
<li><a class="iconDelete" href="#">Usuń</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
Css:
css：
table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}
回答by Doug Amos
The following will solve your problem:
以下将解决您的问题：
td.last {
width: 1px;
white-space: nowrap;
}
Flexible, Class-Based Solution
灵活的基于类的解决方案
And a more flexible solution is creating a .fitwidthclass and applying that to any columns you want to ensure their contents are fit on one line:
一个更灵活的解决方案是创建一个.fitwidth类并将其应用于您想要确保其内容适合一行的任何列：
td.fitwidth {
width: 1px;
white-space: nowrap;
}
And then in your HTML:
然后在你的 HTML 中：
<tr>
<td class="fitwidth">ID</td>
<td>Description</td>
<td class="fitwidth">Status</td>
<td>Notes</td>
</tr>
回答by Sander
If you want to make sure that last row does not wrap and thus size the way you want it, have a look at
如果您想确保最后一行不会换行并因此按您想要的方式调整大小，请查看
td {
white-space: nowrap;
}
回答by acme
You could specify the width of all but the last table cells and add a table-layout:fixed and a width to the table.
您可以指定除最后一个表格单元格之外的所有单元格的宽度，并向表格添加 table-layout:fixed 和宽度。
You could set
你可以设置
table tr ul.actions {margin: 0; white-space:nowrap;}
(or set this for the last TD as Sander suggested instead).
（或者按照 Sander 的建议将其设置为最后一个 TD）。
This forces the inline-LIs not to break. Unfortunately this does not lead to a new width calculation in the containing UL (and this parent TD), and therefore does not autosize the last TD.
这会强制内联 LI 不会中断。不幸的是，这不会导致在包含的 UL（和这个父 TD）中进行新的宽度计算，因此不会自动调整最后一个 TD。
This means: if an inline element has no given width, a TD's width is always computed automatically first (if not specified). Thenits inline content with this calculated width gets rendered and the white-space-property is applied, stretching its content beyond the calculated boundaries.
这意味着：如果一个内联元素没有给定的宽度，则总是首先自动计算 TD 的宽度（如果未指定）。然后呈现具有此计算宽度的内联内容并white-space应用 - 属性，将其内容拉伸到计算出的边界之外。
So I guessit's not possible without having an element within the last TD with a specific width.
所以我想在最后一个 TD 中没有具有特定宽度的元素是不可能的。
回答by Abudayah
use auto and min or max width like this:
像这样使用自动和最小或最大宽度：
td {
max-width:50px;
width:auto;
min-width:10px;
}
