设置表列宽度常量，而不管其单元格中的文本量?

您需要在相应的CSS中编写这些内容

table-layout:fixed;

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

你需要设置单元格宽度(无论是th或td工作，我都设置了)，并设置table-layout到fixed。出于某种原因，单元格宽度似乎只有在设置表宽度时才会保持固定(我认为这很愚蠢，但无所谓)。

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

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

好了，这是我得到的:

table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}


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

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

这里是在JSFiddle

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

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

CSS:

.special_column { width: 120px; }

HTML:

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

只需添加<div>标签在<td>或<th>定义宽度在<div>。 这对你有帮助。

如。

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

我所做的是:

1. 设置td宽度:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>
   

2. Set the td width with CSS:

   <td style="width:200px; height:50px;">
   

3. Set the width again as max and min with CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
   

It sounds little bit repetitive but it gives me the desired result. To achieve this with much ease, you may need put the CSS values in a class in your style-sheet:

.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}

然后:

<td class="td_size">

将class属性放置到任何您想要的<td>。

凯旋的想法是对的。这是正确的代码…

<style type="text/css">
th.first-col > div,
td.first-col > div {
overflow:hidden;
white-space:nowrap;
width:100px
}
</style>


<table>
<thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
<tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

如果您需要一个或多个固定宽度的列，而其他列需要调整大小，请尝试将min-width和max-width设置为相同的值。

在table标记之后，使用col元素。不需要结束标记。

例如，如果你有三列:

<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>

我用了这个

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


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

你不需要设置"fixed" -你所需要的是设置overflow:hidden，因为列宽度已经设置好了。

这也有助于在最后一个“填充单元格”中使用宽度:汽车。这将占用剩余空间，并保留指定的所有其他维度。

我发现KAsun的答案更适合使用大众而不是px，就像这样:

# EYZ0

这是我调整列宽度所需要的唯一样式

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

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/

根据我的回答在这里，也可以使用表的头(可以为空)，并为每个表头单元格应用相对宽度。表体中所有单元格的宽度将与其列头的宽度一致。例子:

超文本标记语言

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

< a href = " https://codepen。io/eicksl/pen/RqbqRN" rel="nofollow noreferrer">查看结果 . io/eicksl/pen/RqbqRN" rel="nofollow noreferrer">查看结果

或者，使用Hyathin回答中建议的colgroup。

设置:

style="min-width:100px;"

为我工作。

我在单元格中使用::after元素，我想设置一个最小宽度，而不管当前的文本，如下所示:

.cell::after {
content: "";
width: 20px;
display: block;
}

我不需要在父表上设置宽度，也不需要使用表布局。

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

或者你也可以瞄准每一行的第一个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;
}