gpt4 book ai didi

html - 如何在没有单独的单元格样式的情况下设置 html 表格列的宽度?

转载 作者:太空宇宙 更新时间:2023-11-04 05:47:54 25 4
gpt4 key购买 nike

我正在尝试找到动态设置表列宽度的最佳方法,而不必单独设置每个单元格的宽度。

我有一个表格,无论内容如何,​​每一列都应该有固定的宽度。如果每个单元格都单独设置了宽度和最大宽度,则此方法可以正常工作。但这动态设置很尴尬。

我正在尝试使用 colgroup 和 col 标签来设置每列的宽度,但这似乎不起作用。

table, th, td {
border: 1px solid black;
}

th, td {
overflow: hidden;
white-space: nowrap;
}
<table>
<colgroup>
<col style="width: 50px; max-width: 50px;">
<col style="width: 50px; max-width: 50px;">
<col style="width: 50px; max-width: 50px;">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>

我希望该示例显示被截断的表的第一列和第二列,但它不起作用。

最佳答案

所以我想知道这是否可以解决问题 - 您可以仅在标题上设置 width/max-width,然后为所有单元格设置 max-width: 0,这似乎可以实现您想要的...

<!DOCTYPE html>
<html>
<head>
<style>

table, th, td {
border: 1px solid black;
}

th, td {
overflow: hidden;
white-space: nowrap;
}

td {
max-width: 0;
}
</style>
</head>
<body>

<table>
<tr>
<th style="width:50px; max-width:50px">ISBN</th>
<th style="width:50px; max-width:50px">Title</th>
<th style="width:50px; max-width:50px">Price</th>
</tr>
<tr>
<td>347689643</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>

</body>
</html>

关于html - 如何在没有单独的单元格样式的情况下设置 html 表格列的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58546021/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com