Question

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

如何使用css完成。

HTML：

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

的CSS：

.table {
    width:100%
}

Answer 1

我会在你的“标签”中添加一个课程

<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>

CSS

.table {
    width:100%
}

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

http://jsfiddle.net/QfN3f/5/

你也可以使用第n个孩子。

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

http://jsfiddle.net/QfN3f/6/

我还会在这里重新考虑表的适当性，因为它实际上可能不是表格数据。也许考虑一个定义列表。

Answer 2

如果您必须使用table，我建议（假设您的标签td元素始终是奇数元素）：

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

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

JS Fiddle demo

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

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

使用CSS：

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 */
}

JS Fiddle demo

Answer 3

为列添加％或固定宽度：

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

或

HTML

<td class="table-col name-col">Name:</td>

CSS

.name-col{
   width:20px;
}

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

如果您想缩小到间隙空间，您可能还希望通过删除width:100%并写入固定宽度或更小的宽度或为所有列写入固定宽度来缩小表格宽度。

Jsfiddle

Answer 4

间隙非常宽，因为表格单元将扩展以占用尽可能多的空间。要减少空白，请在父div中一直停止拉伸表。只需从表格中删除width:100%即可。

当然，您可能希望同时向单元格添加min-width，以便列不会将太多放在一起。

Answer 5

您可以删除宽度：100％并为表格单元格指定填充（td）。

.table td {
    padding: 10px
}

jsfiddle

此外，如果您想自定义某些单个单元格，可以为某些<td class="myCustomClass">添加不同的类，并在css中指定不同的宽度/填充或任何属性。

Answer 6

使用此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>

这个css代码：

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

您也可以使用填充来完全按照自己的意愿制作。

Answer 7

See working jsFiddle demo

只需将您的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>

和你的CSS：

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

将产生：

jsFiddle Results

使用css对齐表格单元格

7 个答案:

See working jsFiddle demo