Html 调整表格单元格宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7613541/
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
Adjusting table cell width
提问by Mr Sooul
Let's take 4 table columns - ID, Text, Date, Action. In my case table have always constant width - in example 960px.
让我们取 4 个表列 - ID, Text, Date, Action。在我的例子中，表格的宽度总是恒定的——例如 960px。
How can I create such table as :
我如何创建这样的表：
*-*------------------------------------*----------*----*
|1| Some text... |May 2011 |Edit|
*-*------------------------------------*----------*----*
|2| Another text... |April 2011|Edit|
*-*------------------------------------*----------*----*
As we can see, ID, Dateand Actionadjust their width to content, Textis as long as possible....
正如我们所见，ID，Date并Action根据内容调整其宽度，Text尽可能长....
Is that possible to do without setting specific width of columns ? When ID= 123 or Date= November 2011, columns should automatically be wider...
不设置列的特定宽度是否可以做到？当ID= 123 或Date= 2011 年 11 月时，列应自动变宽...
回答by Joseph Marikle
Using a 100%width on the wide td and a fixed width for the table along with white-space:nowrap, this can be done:
使用100%宽 td 上的宽度和表格的固定宽度以及white-space:nowrap，可以这样做：
Demo
演示
HTML
HTML
<table>
<tr>
<td>1</td>
<td width="100%">Some text... </td>
<td>May 2011</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td width="100%">Another text... </td>
<td>April 2011</td>
<td>Edit</td>
</tr>
</table>
CSS
CSS
table
{
...
width:960px;
}
td
{
...
white-space:nowrap;
}
回答by oezi
basically, it's just like this: http://jsfiddle.net/49W5A/- you have to set the cell-width to something small (like 1px) to make them stay as small as possible.
基本上，它就像这样：http: //jsfiddle.net/49W5A/- 您必须将单元格宽度设置为较小的（例如1px），以使它们尽可能小。
but as you'll see, theres one problem with the date-fields doing a line-wrap. to prevent this, just add white-space: nowrap;for your text-field: http://jsfiddle.net/ZXu7U/
但正如您将看到的，日期字段进行换行存在一个问题。为了防止这种情况，只需white-space: nowrap;为您的文本字段添加：http: //jsfiddle.net/ZXu7U/
working example:
工作示例：
<style type="text/css">
.table{
width:500px;
border: 1px solid #ccc;
}
.table td{
border: 1px solid #ccc;
}
.id, .date, .action{
width:1px;
}
.date{
white-space: nowrap;
}
</style>
<table class="table">
<tr>
<td class="id">1</td>
<td class="text">Some Text...</td>
<td class="date">May 2011</td>
<td class="action">Edit</td>
</tr>
<tr>
<td class="id">2</td>
<td class="text">Another Text...</td>
<td class="date">April 2011</td>
<td class="action">Edit</td>
</tr>
</table>
回答by Madara's Ghost
My best advice to you is to not touch the widths of the table, the table automatically layouts in a way that does all cells best.
我对您的最佳建议是不要触及表格的宽度，表格会以最适合所有单元格的方式自动布局。
However, if you'd like to push through, I'd use width: 1px;on the cells that needs adjusting (one of each column is enough). Also use white-space: nowrapon all cells. that will make sure the lines don't break.
但是，如果您想通过，我会width: 1px;在需要调整的单元格上使用（每列中的一个就足够了）。也可用于white-space: nowrap所有单元格。这将确保线条不会中断。
回答by robcaa
Try this:
尝试这个：
.id, .date, .action is the table cells (td).
.id, .date, .action 是表格单元格 (td)。
CSS:
CSS：
.id, .date, .action {
width: 1em;
}
It worked for me.
它对我有用。
The width:1em will not cut the text but force the width size to the minimum.
width:1em 不会剪切文本，而是将宽度大小强制为最小。
回答by eicksl
The best way that I've found for setting table column widths is to use a table head(which can be empty) and apply relative widths for each table head cell. The widths of all cells in the table body will conform to the width of their column head. Example:
我发现设置表格列宽的最佳方法是使用表格标题（可以为空）并为每个表格标题单元格应用相对宽度。表格正文中所有单元格的宽度将与其列标题的宽度一致。例子：
HTML
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
Alternatively, you can use colgroupas suggested here.
或者，您可以colgroup按照此处的建议使用。
