gpt4 book ai didi

html - w3-table 列不等宽大小

转载 作者:太空宇宙 更新时间:2023-11-04 01:57:20 26 4
gpt4 key购买 nike

我将 w3css 与类 w3-table 一起使用。我将每个“td”的宽度设置为宽度 35px 和高度 35px。我发现宽度仍然会根据文本发生变化。

这是我的代码:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<style>
.box{
width: 35px;
height: 35px;
border: 1px solid black;
}

.yellow {
background-color: yellow !important;
}
</style>
<body>

<table class="w3-table">
<tbody>
<tr>
<td class="box yellow">20</td>
<td class="box yellow">1000</td>
<td class="box yellow">2</td>
<td class="box yellow">10</td>
<td class="box yellow">1000</td>
</tr>
<tr>
<td class="box yellow">&nbsp;</td>
<td class="box yellow">&nbsp;</td>
<td class="box yellow">&nbsp;</td>
<td class="box yellow">&nbsp;</td>
<td class="box yellow">&nbsp;</td>
</tr>
</tbody>
</table>

</body>
</html>

我附上如下结果输出:

Output Result

有A、B、C、D、E列标记,方便我解释。带有文本 20B 带文本 1000C 与文本 2D 与文本 10E 带文本 1000

A 和 D 列有两个数字文本,即分别为 20 和 10。我预计 A 和 D 的宽度相同,但输出结果显示 A 的宽度略大于 D。我可以得出结论,与其他列相比,第一列总是略大。我还注意到列宽根据文本数量而变化。示例 B 列中的 1000 和 C 列中的 E 宽度更大的 2。

我可以知道如何确保列宽能够在每列中保持固定的大小比例,同时能够保持响应式网页吗?

如果你能给我一些提示,我将不胜感激。

最佳答案

做这个改变

.yellow {
background-color: yellow !important;
max-width:35px;
}

这将使所有列的宽度相等,即使它具有很大的值。这是运行示例:

.box{
width: 35px;
height: 35px;
border: 1px solid black;
}
.yellow {
background-color: yellow !important;
max-width:35px;
}
    <!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
</head>

<body>
<table class="w3-table">
<tbody>
<tr>
<td class="box yellow">20</td>
<td class="box yellow">1000</td>
<td class="box yellow">289834595</td>
<td class="box yellow">10</td>
<td class="box yellow">1000</td>
</tr>
<tr>
<td class="box yellow">&nbsp;</td>
<td class="box yellow">&nbsp;</td>
<td class="box yellow">&nbsp;</td>
<td class="box yellow">&nbsp;</td>
<td class="box yellow">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

关于html - w3-table 列不等宽大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42363723/

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