我用了这个

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

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

在餐桌上找到合适的尺寸是很棘手的。唯一对我有效的方法是使用表格布局: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/

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

CSS:

.special_column { width: 120px; }

HTML:

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

我用了这个

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

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

如果对表的访问受限，那么使用类或内联样式可能会比较复杂。

或者你也可以瞄准每一行的第一个td和第th个子元素(也就是第一列)

当我用width测试它时，下面的规则对我有用，但由于某种原因，max-width不适用:

thead, tbody tr {
            
    display:table;
    width:100%;
    table-layout:fixed;
}

tr th:first-child, tr td:first-child {
                
    width:100px;
}