Html 使用css对齐表格单元格

我需要减少Name:和“Bob”之间的空格，类似于Age:和“20”之间的空格

如何使用css来实现

小提琴：

html:

---

向列中添加%或固定宽度：

<td class="table-col" width="20px">Name:</td>

如果没有指定每列的宽度，则每列的宽度相同

---

如果要减小间隙空间，还可以通过删除

width:100%

并写入固定宽度或更小的值，或向所有列写入固定宽度来减小表宽度

---

由于表格单元格将扩展以占据尽可能多的可用空间，因此间距非常大。要减少空白，请停止在父div中一直拉伸表。只需从表中删除

width:100%

---

当然，您可能希望同时向单元格中添加

min width

，这样列就不会靠得太近。

您可以删除width:100%并指定表格单元格的填充（td）

另外，如果你想自定义一些单独的单元格，你可以给一些

添加不同的类，并在css中指定不同的宽度/填充或任何你想要的属性。

我会给你的“标签”添加一个类

您还可以使用第n个child

tr td:nth-child(odd) {width:50px; font-weight:bold;}

我还想重新考虑一下这里表格的适当性，因为它实际上可能不是表格数据。可以考虑定义列表。< /P> < P>使用此HTML代码：

<table class="table">
<tr class="table-row">
    <td class="table-col-a">Name:</td>
    <td class="table-col-b">Bob</td>
    <td class="table-col-a">Age:</td>
    <td class="table-col-b">20</td>
</tr>
</table>  

你也可以使用填充物，使其完全符合你的需要

---

只需将HTML修改为：

<table class="table">
    <tr class="table-row">
        <td class="table-cola">Name:</td>
        <td class="table-colb">Bob</td>
        <td class="table-cola">Age:</td>
        <td class="table-colb">20</td>
    </tr>
</table>

这将产生：

如果您必须为此使用

表，我建议（假设您的标签
td
元素始终是奇数元素）：


但是，我强烈建议转向更具语义的HTML，例如定义列表：

<dl>
    <dt>Name</dt>
    <dd>Bob</dd>
    <dt>Age</dt>
    <dd>20</dd>
</dl>

.
这只会使其他差距变得更大，而且它不是真正的css解决方案。@user1618143编辑了我的回复。对于width=“20px”，它也可以添加到CSS中。为什么要使用
来近似a？+1来全面解释
DL
，但如何处理多个“行”？复制姓名和年龄是否会违反定义列表的语义值？
.table td {
    padding: 10px
}

<table class="table">
    <tr class="table-row">
        <td class="table-col label">Name:</td>
        <td class="table-col">Bob</td>
        <td class="table-col label">Age:</td>
        <td class="table-col">20</td>
    </tr>
</table>

.table {
    width:100%
}

.label {width:50px; font-weight:bold;}

tr td:nth-child(odd) {width:50px; font-weight:bold;}

<table class="table">
<tr class="table-row">
    <td class="table-col-a">Name:</td>
    <td class="table-col-b">Bob</td>
    <td class="table-col-a">Age:</td>
    <td class="table-col-b">20</td>
</tr>
</table>  

.table-col-a{float:right;} 

<table class="table">
    <tr class="table-row">
        <td class="table-cola">Name:</td>
        <td class="table-colb">Bob</td>
        <td class="table-cola">Age:</td>
        <td class="table-colb">20</td>
    </tr>
</table>

.table 
{
    width:100%
}
.table td
{
    width: 25%;
}
.table-cola
{
    text-align: right;
}
.table-colb
{
    text-align: left;
}

td:nth-child(odd) {
    text-align: right;
}

td:nth-child(even) {
    text-align: left;
}

<dl>
    <dt>Name</dt>
    <dd>Bob</dd>
    <dt>Age</dt>
    <dd>20</dd>
</dl>

dt, dd {
    display: inline-block; /* allows the elements to be side-by-side */
    width: 5em;
    margin: 0; /* removes the default margins */
    padding: 0.2em 0; /* aesthetics, but sets/overrides the defaults */
}

dt {
    text-align: right; /* to move the 'label' towards the 'value' */
}

dd {
    text-align: left;
    text-indent: 0.5em; /* aesthetic, gives a small separation; adjust to taste */
}