调整表格单元格宽度

Question

我们来考虑一个4列的表格 - ID、Text、Date 和 Action。在我的情况下，表格始终具有固定的宽度 - 例如960像素。

我要如何创建这样的表格：

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

正如我们所看到的，ID、Date和Action根据内容自动调整宽度，Text尽可能地长...

是否可以在不设置列的特定宽度的情况下实现这一点？当ID= 123或Date= November 2011时，列应自动变宽...

- Mr Sooul

---

如果我没记错的话，你可以将它们的宽度设置为0，然后它们会自动调整。如果是真的，我会尝试发布一个答案。 - Madara's Ghost

默认情况下，表格会根据其内容进行扩展。您只需不设置其大小，尽管可以使用min-width来强制设置最小大小。然后将文本列设置为100％。您还需要确保日期列不换行。 - Erik Funkenbusch

是的，这似乎是一个不错的解决方案... - Mr Sooul

是的，我在测试后也注意到了 @MrSooul :) - Madara's Ghost

Answer 1

使用宽 td 上的 100% 宽度和固定宽度的表格以及 white-space:nowrap，可以实现此操作：

演示

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

- Joseph Marikle

---

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

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

- oezi

Answer 3

请尝试以下方法：

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

CSS：

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

它对我起作用了。

width:1em不会切断文字，但会强制将宽度大小调整到最小。

- robcaa

Answer 4

我给您的最佳建议是不要修改表格的宽度，表格会自动按最佳方式布局所有单元格。

但是，如果您想要进行修改，可以在需要调整的单元格上使用width: 1px;（每列一个即可），同时在所有单元格上使用white-space: nowrap，以确保行不会折断。

- Madara's Ghost

Answer 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;
}

查看结果

另外，你也可以像这里建议的那样使用colgroup。

- eicksl