gpt4 book ai didi

html - 创建一个具有自动宽度 的表格

转载 作者:太空宇宙 更新时间:2023-11-03 21:16:08 25 4
gpt4 key购买 nike

我将尝试解释我自己。我想实现这个:

我需要创建一个包含 4 列和许多 td(行)的表格。但是,我需要单行根据其内容具有自动列宽。

通常情况下,列会发生这种情况,最大的 td(行)决定了其中包含的列的大小:

enter image description here

相反。我正在努力实现这一目标:

我仍然想在表(列)中组织元素,以便我可以为 ex 组织内容。按字母属性。但是我需要这些列看起来像这样:

enter image description here

有什么想法吗?

最佳答案

可以设置display:inline对于列( <td> )。更好的选择是使用 <div>和 flexbox。

td {
border:2px solid red;
display: inline;
}
td:nth-child(1) {
background:yellow;
}
td:nth-child(2) {
background:blue;
}
td:nth-child(3) {
background:grey;
}
td:nth-child(4) {
background:orange;
}
table {
border:1px dashed black;
}
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>Ant</td>
<td>Bear</td>
<td>Cat</td>
<td>Dog</td>
</tr>
</table>

关于html - 创建一个具有自动宽度 <td> 的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42072340/

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