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，可以这样做：

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

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

View Result

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

调整表格单元格宽度

5 个答案:

Demo

HTML

CSS