HTML表格：具有最小宽度和分词的列

我想显示下表：

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

我想要这个

• 第一列（id）具有可能的最小宽度（空白：nowrap）
• 其他列（名称、描述）应在必要时打断单词（换行：打断单词）
• 最后一列还有可能的最小宽度（空白：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>

列id{宽度：1%；}
列名称{宽度：20%；}
列说明{宽度：30%；}
列用户{宽度：30%；}
col.games{宽度：9%；}
列函数{宽度：9%；}
列操作{宽度：1%；}
表td:n子（2）{wrap:break-word；}
表td:n子（3）{wrap:break-word；}
表td:n子（4）{wrap:break-word；}
阿勒·格鲁本
身份证件
名称
描述
成员
游戏
功能
行动
//使用数据库中的数据进行循环

看看这里，它是一种动态方式-

身份证件
名称
描述
行动
...
........
................
.....

看看这里，它是一种动态方式-

身份证件
名称
描述
行动
...
........
................
.....
在HTML5中，

等等。这适用于布局固定的表。如果您想让浏览器动态调整表格内容（如果您想，您的问题不清楚），您可以省略

表格布局

属性（或将其设置为

自动

），还可以如上所述使用colgroup来定义宽度。这一次，基本上只是向浏览器提示如何格式化：

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

省略“说明”列应指定该列可用的其余宽度

希望这有帮助

在HTML5中

等等。这适用于布局固定的表。如果您想让浏览器动态调整表格内容（如果您想，您的问题不清楚），您可以省略

表格布局

属性（或将其设置为

自动

），还可以如上所述使用colgroup来定义宽度。这一次，基本上只是向浏览器提示如何格式化：

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

省略“说明”列应指定该列可用的其余宽度

---

---

希望这有帮助

您是否需要

表格布局：固定
？如果您删除它，并将列（在
元素上）的宽度设置为
1%，30%，auto，1%
或类似的值，则表格的格式应与您所需的格式相同。@thomasfuchs实际上，如果他必须在表格列上执行此操作，并且内联是必需的，那么您只需要在第一行（通常是第th个元素）上执行此操作样式必须是内联的吗？不。我现在注意到一个问题：如果我删除
表格布局：固定的
，则无法再看到表格的最新列，因为窗口结束于此。表格：固定的，将其设置为具有所有相等的宽度，无论内容如何，都应执行宽度：100%是否需要
表格布局：固定的
？如果删除然后给列（在
元素上，
1%，30%，auto，1%
的宽度，或者类似的东西，表格的格式应该像你想要的那样。@thomasfuchs实际上，如果他必须在表格列上这样做，并且需要内联，那么你只需要在第一行（通常是第th个元素）上这样做样式必须是内联的吗？不。我现在注意到一个问题：如果我删除
表格布局：fixed
，则无法再看到表格的最新列，因为窗口结束于此。table:fixed，将其设置为具有所有相等的宽度，无论内容如何，您都应该执行宽度：100%您不必这样设置col元素，您可以实际上，把宽度放在th上应该没问题……你应该把它放在样式标签上……因为html5不再支持宽度了……但是你也不应该在一般情况下使用内联样式……shrugI真的不想在列上设置绝对宽度（比如80px或10%）因为id可以变为10000，然后绝对宽度就不再合适了。当我删除
表格布局：fixed
时，单词不再被打断。表格的宽度为100%@Daemedeor或者我们如何在样式标记中做到这一点，所有
th
只需要一个值。这就是你使用样式标记的方式，你不必制作样式标记像这样的col元素，你可以把宽度放在th上，它应该很好…你应该把它放在样式标签上…因为html5不再支持宽度…但是你也不应该一般使用内联样式…shrugI真的不想在列上设置绝对宽度（比如80px或10%）因为id可以变为10000，然后绝对宽度就不再合适了。当我删除
表格布局：fixed
时，这些字就不再被打断了。表格的宽度为100%@Daemedeor或者我们如何在样式标记中做到这一点，它会
col.id          { width: 1%; }
col.name        { width: 30%; }
col.actions     { width: 1%; }