Question

我希望无论内容如何都让它看起来都一样（我想我需要宽度，但我不知道在哪里）。我在所有表格上都做了宽度：100％。

因为如果你看到“Idag”，你会看到文字与“旧”的不同之处。这是因为“旧”列中的td比“idag”（仅限时间）中的td更长（日期+时间）。

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

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

Answer 1

提供您的TD类名并使用样式表指定宽度。这样你只需要在一个地方改变东西。

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

.col1 {
  width:50px;
}

.col2 {
  width:60px;
}

Answer 2

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

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

在你的css中，在cell类下，添加

.cell{
    width:150px;
}

注意：这会导致所有类名为“cell”的单元格（＆lt; td＆gt;）的宽度为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>

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

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

HTML / CSS：表格文本对齐

6 个答案: