Html 调整表格单元格宽度

让我们选取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月时，列应自动变宽…

使用宽td上的

100%

宽度和表的固定宽度以及

空白：nowrap

，可以执行以下操作：

HTML

---

基本上，它是这样的：-您必须将单元格宽度设置为较小的值（如

1px

），使其尽可能小

但正如您将看到的，日期字段换行有一个问题。为了防止这种情况，只需添加

空白：nowrap用于文本字段：

工作示例：

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


.桌子{
宽度：500px；
边框：1px实心#ccc；
}
.表td{
边框：1px实心#ccc；
}
.id、.date、.action{
宽度：1px；
}
.日期{
空白：nowrap；
}
1.
一些文字。。。
2011年5月
编辑
2.
另一个文本。。。
2011年4月
编辑
我给你的最好建议是不要触摸表格的宽度，表格的自动布局方式最适合所有单元格

然而，如果你想通过，我会使用宽度：1px（每列一个就足够了）。在所有单元格上也使用
空白：nowrap
。这将确保线路不会中断。
尝试以下方法：

.id、.date、.action是表单元格（td）

CSS:

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

这对我有用

宽度：1em不会剪切文本，但会强制将宽度大小减至最小。
我发现设置表格列宽的最佳方法是使用表头（可以为空）并为每个表头单元格应用相对宽度。表体中所有单元格的宽度将与其列标题的宽度一致。例如：

HTML


或者，您可以按照建议使用
colgroup
。
IIRC，将其宽度设置为0，然后进行调整。如果答案为真，我将尝试发布一个答案。默认情况下，表会展开以适应其内容。您只是不为它设置大小，尽管您可以使用最小宽度强制设置最小大小。然后将文本列设置为100%。您还必须确保您的日期列不会换行。是的，这似乎是一个很好的解决方案……是的，我在测试@MrSooul:）后注意到了这一点。请注意，只有列中最宽的单元格需要设置宽度。因此，第二个单元格中的单词“另一个文本…”在技术上不需要width属性。
<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>

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

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

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

td {
  border: 1px solid #999999;
}