调整表格单元格宽度答案

【问题标题】：Adjusting table cell width调整表格单元格宽度
【发布时间】：2011-09-30 16:49:08
【问题描述】：

让我们取 4 个表格列 - ID、Text、Date、Action。在我的情况下，表格的宽度总是恒定的 - 例如 960px。

我怎样才能创建这样的表：

*-*------------------------------------*----------*----*
|1| Some text...                       |May 2011  |Edit|
*-*------------------------------------*----------*----*
|2| Another text...                    |April 2011|Edit|
*-*------------------------------------*----------*----*

如我们所见，ID、Date 和 Action 调整它们的宽度以适应内容，Text 尽可能长......

是否可以在不设置特定列宽的情况下做到这一点？当ID = 123 或Date = 2011 年 11 月时，列应自动变宽...

【问题讨论】：

IIRC，您将它们的宽度设置为 0，它们会进行调整。如果属实，我会尝试发布答案。
默认情况下，表格会展开以适应其内容。您只是不为其设置大小，尽管您可以使用最小宽度来强制最小尺寸。然后将您的文本列设置为 100%。您还必须确保您的日期列不换行。
是的，这似乎是一个很好的解决方案......
是的，我在测试@MrSooul 后注意到了:)

标签： html css css-tables

【解决方案1】：

在宽 td 上使用 100% 宽度并为表格使用固定宽度以及 white-space:nowrap，可以做到这一点：

Demo

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

table
{
    ...
    width:960px;
}

td
{
    ...
    white-space:nowrap;
}

【讨论】：

请注意，只有列中最宽的单元格需要设置宽度。因此，第二个带有“Another text...”字样的单元格在技术上不需要宽度属性。

【解决方案2】：

基本上，就像这样：http://jsfiddle.net/49W5A/ - 您必须将单元格宽度设置为较小的值（例如 1px）以使其尽可能小。

但正如您将看到的，日期字段进行换行时存在一个问题。为了防止这种情况，只需为您的文本字段添加white-space: nowrap;：http://jsfiddle.net/ZXu7U/

工作示例：

<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>

【讨论】：

【解决方案3】：

我对您的最佳建议是不要触摸表格的宽度，表格会自动以最适合所有单元格的方式布局。

但是，如果您想推进，我会在需要调整的单元格上使用width: 1px;（每列一个就足够了）。还要在所有单元格上使用white-space: nowrap。这将确保线路不会中断。

【讨论】：

【解决方案4】：

试试这个：

.id、.date、.action 是表格单元格 (td)。

CSS：

.id, .date, .action {
   width: 1em;
}

它对我有用。

width:1em 不会剪切文本，而是将宽度大小强制为最小。

【讨论】：

【解决方案5】：

我发现设置表格列宽的最佳方法是使用 表格标题（可以为空）并为每个表格标题单元格应用相对宽度。表格主体中所有单元格的宽度将与其列标题的宽度一致。示例：

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

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

View Result

或者，您可以按照建议的here 使用colgroup。

【讨论】：