HTML/CSS：表中的文本对齐

我有这样的： http://jsfiddle.net/bDTRz/HTML/CSS：表中的文本对齐

我想使它看起来都一样，不管内容（我想我需要的宽度，但我不知道在哪里）。我做了所有表格的宽度：100％。

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

我该如何解决这个问题？我知道我需要在td's使用宽度，我试过了，但我仍然没有设法让他们都互相

我现在为止获得这样的一致： http://jsfiddle.net/79jH6/

但仍须并不像我想要的那样对齐。

来源

2010-12-07 Karem

为什么关闭？我提供了jsfiddle，我尝试了什么，这个问题，我想如何？ – Karem 2010-12-07 21:42:42

这里真正的问题是对如何计算列宽缺乏理解。我同样缺乏理解—在表单元格上设置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/

来源

2010-12-08 15:26:10

在你的CSS

，在cell类下，加

.cell{ 
    width:150px; 
}

注意：这将导致所有的细胞（<TD>的）与类名‘细胞’具有的宽度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>

来源

2010-12-07 21:42:18 Dutchie432

我不会推荐使用[不推荐的表示属性]（http://www.w3.org/TR/html4/struct/tables.html#adef- width-TH）。 – Phrogz 2010-12-07 21:50:10

只是提供选项。我确实认为CSS是要走的路。 – Dutchie432 2010-12-07 21:52:32

给你的TD类名和使用样式表来分配宽度指定每个单元格的宽度。这样你只需要在一个地方改变东西。

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

.col1 { 
    width:50px; 
} 

.col2 { 
    width:60px; 
}

来源

2010-12-07 21:42:34

我试过了，但它仍然表现相同，表格不一样。请参阅新的：http://jsfiddle.net/79jH6/ – Karem 2010-12-08 09:59:58

你可以做这样的：

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

这将使宽度相等只有第一细胞。

来源

2010-12-07 21:43:33

而是分离的内容到多个表的，你能代替做到这一点：

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

我不知道这是否是语义上更好或更差比你有什么，因为我看不懂的语言（瑞典语？），但它可以确保您的内容排列起来，不需要固定宽度。

来源

2010-12-07 21:48:50 Phrogz

我想我明白你是什么 - 一致的列宽？

您需要为每个表格单元格（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>

在上面的代码，我已经设置了类的日期单元格为“日期”，文本串电池类“递减”，你已经拥有了“ 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; 
}

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

来源

2010-12-07 21:54:20 tjk

HTML/CSS：表中的文本对齐

回答

相关问题