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：表中的文本對齊

回答

相關問題