调整表格单元格宽度

Question

我们取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月时，列应自动更宽......

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

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>

Answer 3

我最好的建议是不要触摸桌子的宽度，桌子会自动布局，使所有单元格最佳。

但是，如果你想要推进，我会使用width: 1px; 在需要调整的单元格上（每列中的一个就足够了）。 也可以在所有细胞上使用white-space: nowrap 。 这将确保线条不会破裂。

Answer 4

试试这个：

.id，。日期，.action是表格单元格（td）。

CSS：

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

它对我有用。

宽度：1em不会剪切文本，但会将宽度大小调整到最小。

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 。