提问人：wcminipgasker2023 提问时间：6/9/2023 最后编辑：wcminipgasker2023 更新时间：6/13/2023 访问量：98
对于 100% 的表格，如何在 <td> 内水平均匀分布元素？
For a 100% table, how to spread elements horizontally evenly inside <td>?
问：
例如，我有一个表，第一列包含一些不同长度的元素：
<table border="1" style="text-align:center;width:100%;">
<tr><td><span>a</span></td><td>1</td></tr>
<tr><td><span>a</span><span>a</span></td><td>1</td></tr>
<tr><td><span>a</span><span>a</span><span>a</span></td><td>1</td></tr>
<tr><td><span>a</span><span>a</span><span>a</span><span>a</span><td>1</td></tr>
<table>如何为元素添加空间，使<td>中的元素均匀分布？
我试过了：
span{
display:inline-block;
}
.container {
display: flex;
}
.container.space-around {
justify-content: space-around;
}
.spaceBetween{
display:space-between;
}<table border="1" style="text-align:center;width:100%;">
<tr class="container space-around"><td class="spaceBetween"><span>a</span></td><td>1</td></tr>
<tr class="container space-around"><td class="spaceBetween"><span>a</span><span>a</span></td><td>1</td></tr>
<tr class="container space-around"><td class="spaceBetween"><span>a</span><span>a</span><span>a</span></td><td>1</td></tr>
<tr class="container space-around"><td class="spaceBetween"><span>a</span><span>a</span><span>a</span><span>a</span></td><td>1</td></tr>
</table>但不起作用。
答：
1赞
Salketer
6/9/2023
#1
.spaceBetween {
display: flex;
justify-content: space-around;
}<table border="1" style="text-align:center;width:100%">
<tr class="container space-around">
<td class="spaceBetween"><span>a</span></td>
<td>1</td>
</tr>
<tr class="container space-around">
<td class="spaceBetween"><span>a</span><span>a</span></td>
<td>1</td>
</tr>
<tr class="container space-around">
<td class="spaceBetween"><span>a</span><span>a</span><span>a</span></td>
<td>1</td>
</tr>
<tr class="container space-around">
<td class="spaceBetween"><span>a</span><span>a</span><span>a</span><span>a</span></td>
<td>1</td>
</tr>
</table>你只是没有把你的弯曲放在正确的位置，完全打破了桌子。我更改了它，以便将 flex 应用于单元格。
-1赞
Thomas Bortolato
6/9/2023
#2
要均匀分布表格第一列中的元素，您可以使用 CSS 将“text-align： justify”属性应用于该列中的单元格。下面是如何实现此目的的示例：
html
<style>
.distribute {
text-align: justify;
}
</style>
<table>
<tr>
<td class="distribute">Element 1</td>
<td>Value 1</td>
</tr>
<tr>
<td class="distribute">Element 2</td>
<td>Value 2</td>
</tr>
<tr>
<td class="distribute">Element 3</td>
<td>Value 3</td>
</tr>
<!-- Add more rows as needed -->
</table>
通过将“distribute”类应用于第一列中的单元格（在本例中为元素），“text-align： justify”属性将均匀分布每个单元格中的内容。这样，元素将被间隔以填充列的整个宽度。不要忘记调整表格的结构和内容以满足您的特定需求。
评论
0赞
JoSSte
6/9/2023
reponses en langues different que anglais sont non-acceptable.S'il-vous-plait reformule votre reponse en anglais.
0赞
Jayram Kumar
6/9/2023
这是用哪种语言写的？
0赞
Thomas Bortolato
6/9/2023
用英语，但很糟糕
评论