HTML/CSS：表格文本对齐

Question

我有这个： http://jsfiddle.net/bDTRz/

无论内容如何，​​我都希望它看起来都一样（我想我需要宽度，但我不知道在哪里）。我在所有桌子上都做了 width: 100%。

因为如果您看到“Idag”，您会看到文本与“旧”有何不同。这是因为“old”列中的 td 比“idag”中的 td 长（日期+时间）（仅时间）。

我该如何解决这个问题？我知道我需要在 td 上使用宽度，我试过了，但我仍然没有设法让它们彼此对齐

我现在已经做到了： http://jsfiddle.net/79jH6/

但它仍然不像我想要的那样对齐。

Answer 1

这里的真正问题是对如何计算列宽缺乏了解。我同样缺乏理解——在表格单元格上设置width 通常是一项尴尬的任务，因此我不经常使用表格。我设法通过定义一个带有 3 个 <col> 子级的 <colgroup> 元素来解决您的特定问题，每个子级都有一个类名：

<colgroup>
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
</colgroup>

还有以下 CSS：

.col1 { width: 70px; }
.col2 { width: auto; }
.col3 { width: 30px; }

工作演示：http://jsfiddle.net/QrUj9/1/

Answer 2

给您的 TD 类名称并使用您的样式表来分配宽度。这样您只需要在一个地方进行更改。

<td class='col1'>...</td><td class='col2'>...</td>

.col1 {
  width:50px;
}

.col2 {
  width:60px;
}

Answer 3

在您的 CSS 中，在 cell 类下，添加

.cell{
    width:150px;
}

注意：这将导致所有类名为“cell”的单元格（

）的宽度为 150 像素。

或者，您可以在 HTML 中指定每个单元格的宽度

<table>
<tr>
<td class="cell" width="150">...</td>
<td class="cell" width="100">...</td>
<td class="cell" width="75">...</td>
<td class="cell" width="50">...</td>
</tr>
</table>

【讨论】：

• 我不推荐使用deprecated presentational attributes。
• 只是提供选项。我确实认为 CSS 是要走的路。

Answer 4

你可以这样做：

table tr td.cell:first-child {
    width: 150px;
}

这将使第一个单元格的宽度仅相等。

Answer 5

您可以这样做，而不是将您的内容分成多个表格，而是这样做：

<table><tbody>
  <tr><th colspan="3">Idag (1) - ta bort alla</th></tr>
  <tr><td>21 minuter sedan</td>...</tr>
</tbody><tbody>
  <tr><th colspan="3">Igår (1) ta bort alla </th></tr>
  <tr><td>kl. 22:17</td>...</tr>
</tbody><tbody>
  <tr><th colspan="3">Old (33) ta bort alla</th></tr>
  ...
</tbody></table>

我不确定它在语义上是否比您所拥有的更好或更差，因为我看不懂该语言（瑞典语？），但它可以确保您的内容排列整齐，不需要固定宽度。

Answer 6

我想我明白你在追求什么 - 一致的列宽？

您需要为每个表格单元格（td 标签）分配一个特定的类，并在您的 CSS 中为其指定宽度。

示例表格行：

<tr>
<td class="date">21 minuter sedan</td>
<td class="desc">
<a href="profil.php?id=1&amp;wE=2165"><strong>Meg Meg</strong> har skrivit på din vägg.</a></td>
<td>
<a id="1231" data-id="T" class="removeAction">DEL</a>
</td>
</tr>

在上面的代码中，我已将日期单元格的类设置为“date”，将文本字符串单元格类设置为“desc”，并且您已经为 DEL 单元格设置了“removeAction”类。

示例 CSS：

#todayNotes{ 
    width: 100%;
}

#yesterdayNotes{
    width: 100%;
}

#olderNotes{
    width: 100%;
}

.cellDate{
    width:150px;
    border: 1px solid #000;
}

.cellNote{
    border: 1px solid red;
}

.cellDel{
    width: 10px;
    border: 1px solid green;
}

显然，调整宽度以适合您的布局。