HTML 表格：具有最小宽度和断字的列

Question

我要显示下表：

+----+------+-------------+---------+
| id | name | description | actions |
+----+------+-------------+---------+
| .. |  ..  |     ..      |   ..    |

我想要那个

• 第一列 (id) 的宽度尽可能最小 (white-space:nowrap)
• 其他列（名称、描述）应在必要时分词（自动换行：break-word）
• 最后一列也有可能的最小宽度（空白：nowrap）

我有什么：

 <table class="table_standard" style="word-wrap:break-word; table-layout: fixed;">

但使用此代码，所有列的宽度都相同。

我该如何解决这个问题？

@thomasfuchs

这是 1920x1080 显示器的外观：

这是屏幕宽度较小时的外观：

这就是它在极低分辨率下的样子：

如您所见，如果分辨率太低，我希望浏览器打断单词，但它只是不显示完整的表格。

这是我当前的代码：

<style>
    col.id          { width: 1%; }
    col.name        { width: 20%; }
    col.description     { width: 30%; }
    col.users     { width: 30%; }
    col.games     { width: 9%; }
    col.functions     { width: 9%; }
    col.actions     { width: 1%; }
    table td:nth-child(2) { word-wrap: break-word; }
    table td:nth-child(3) { word-wrap: break-word; }
    table td:nth-child(4) { word-wrap: break-word; }
</style>
<table class="table_standard" style="word-wrap: break-word">
    <colgroup>
        <col class="id">
        <col class="name">
        <col class="description">
        <col class="users">
        <col class="games">
        <col class="functions">
        <col class="actions">
    </colgroup>
    <tr>
        <th class="th_titlebar" colspan="7">Alle Gruppen</th>
    </tr>
    <tr>
        <th class="th_subtitle">ID</th>
        <th class="th_subtitle">Name</th>
        <th class="th_subtitle">Description</th>
        <th class="th_subtitle">Members</th>
        <th class="th_subtitle">Games</th>
        <th class="th_subtitle">Functions</th>
        <th class="th_subtitle">Actions</th>
    </tr>
    //loop with data from the db
</table>

Answer 1

在 HTML5 中，use the colgroup element, which contains col elements that define the desired widths。

<colgroup>
  <col class="id">
  <col class="name">
  <col class="description">
  <col class="actions">
</colgroup>

在table 元素下直接插入colgroup 元素。

然后您可以只使用 CSS 来定义列宽：

col.id          { width: 100px; }
col.name        { width: 200px; }
col.description { width: 300px; }
col.actions     { width: 100px; }

等等。这是针对具有fixed 布局的表。如果您希望浏览器动态调整表格的内容（如果您愿意，您的问题不清楚），您可以省略table-layout 属性（或将其设置为auto），并使用上面的colgroup定义宽度。这一次，它基本上只是向浏览器“提示”如何格式化：

col.id          { width: 1%; }
col.name        { width: 30%; }
col.actions     { width: 1%; }

省略描述列应分配该列可用的其余宽度。

希望这会有所帮助！

Answer 2

看看这里，它以动态方式工作 -

<table class="table_standard" border='1' style='position : absolute; top : 0px left : 0px; word-wrap:break-word; text-align:center; '>
        <tr>
            <th> ID </th>
            <th> Name </th>
            <th> Description </th>
            <th> Action </th>
        </tr>
        <tr>
            <td>...</td>
            <td>........</td>
            <td>................</td>
            <td>.....</td>
        </tr>        
    </table>

如果您不想要动态列宽，请尝试每个固定列 - 以下方式

table, th, td {
    border: 1px solid black;
    text-align:center; 
    word-wrap:break-word;
}

<table>
  <tr>
    <th style='width:30px'>ID</th>
    <th style='width:80px'>Name</th>
    <th style='width:150px'>Description</th>
    <th style='width:75px'>Action</th>
  </tr>
  <tr>
    <td>..</td>
    <td>..</td>
    <td>..</td>
    <td>..</td>
  </tr>
</table>