CSS表均匀列宽度
CSS表均匀列宽度
提问于 2022-06-26 22:30:47
是否有一种方法可以获得一个列宽度相等的表，而不指定表的总体宽度和单独的列宽？
换句话说，是否每一列都是最宽列的宽度--而事先不知道最宽列的宽度？
(我猜我的意思是不用等待表呈现，然后找到每一列的宽度，然后让JS将所有列的宽度设置为最大宽度)。
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-06-27 05:57:13
我认为你不能用<table>来做，但是你可以用display: grid来做。
.a {
display: inline-block;
}
.a>div {
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 2px;
}
.a>div>div {
border: 1px solid silver;
}<div class="a">
<div>
<div>1</div>
<div>22</div>
<div>333</div>
<div>4444</div>
<div>55555</div>
<div>66</div>
<div>7777</div>
<div>888888</div>
<div>99999999</div>
<div>0000000000</div>
</div>
</div>
Stack Overflow用户
发布于 2022-06-27 00:43:11
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
表的另一种解决方案可以是CSS网格系统。如果需要，可以使用CSS网格解决问题。
https://www.w3schools.com/css/css_grid.asp
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>Stack Overflow用户
发布于 2022-06-28 06:18:20
那这个呢？这能做你想要的吗？
你说你想要的是：
是否有一种方法可以获得一个列宽度相等的表，而不指定表的总体宽度和单独的列宽？
因此，我的CSS没有指定表的宽度，也没有指定固定的列宽度。但是，它根据表中的列数指定了百分比列宽度。
结果是一个表，其中所有的列都是相同的宽度，并且该表只有它所需的宽度。
td {
border: 1px solid silver;
width: 20%;
}<table class="a">
<tr>
<td>1</td>
<td>22</td>
<td>333</td>
<td>4444</td>
<td>55555</td>
</tr>
<tr>
<td>66</td>
<td>7777</td>
<td>888888</td>
<td>99999999</td>
<td>0000000000</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72765581
复制相关文章
相似问题
腾讯云开发者
