在餐桌上找到合适的尺寸是很棘手的。唯一对我有效的方法是使用表格布局:fixed;与每条线的指定宽度相结合。和宽度:auto;在你不介意生长的一列上。

下面是一个使用无类表的示例。如果您正在处理一些动态列，则需要一个类化版本。

table { table-layout: fixed; } th,td { text-align: left; vertical-align: top; /* use this in the columns where you're not concerned with new lines */ word-break: break-word; } th:first-child, th:last-child { width: 5ch; text-align: center; } th:nth-child(n + 2):nth-child(-n + 3) { background: red; width: 25%; } th:nt-child(4) { background: blue; width: auto; } <table> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Description</th> <th>Age</th> </tr> </thead> <tbody> <tr> <th>1</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>2</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>3</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>4</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> </tbody> </table>

使接受的答案响应小屏幕时，小于固定宽度。

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS小提琴

https://jsfiddle.net/w9s3ebzt/

我用了这个

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

只需在<td>或<th>定义宽度<div>内添加<div>标签。 这对你有帮助。别的都不管用。

eg.

<td><div style="width: 50px" >...............</div></td>

如果不想要固定的布局，请指定一个类，使列的大小适当。

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

我玩了一会儿，因为我搞不懂。

你需要设置单元格宽度(th或td工作，我设置两者)和设置表格布局固定。出于某种原因，单元格宽度似乎只有在设置表宽度时才会保持固定(我认为这很愚蠢，但无所谓)。

此外，将overflow属性设置为hidden也很有用，可以防止任何额外的文本从表中输出。

你也应该确保所有的边界和大小都留给CSS。

好了，这是我得到的:

表{ 边框:1px纯黑色; 表布局:固定; 宽度:200 px; ｝ th, td { 边框:1px纯黑色; 宽度:100 px; 溢出:隐藏; ｝ <表> < tr > < th >头1 < / th > < th >头234567895678657 < / th > < / tr > < tr > < td >数据asdfasdfasdfasdfasdf td > < / < td >数据2道明> < / < / tr > 表> < /

在JSFiddle中

这个家伙有一个类似的问题:表单元格宽度-固定宽度，换行/截断长单词