HTML/CSS：表のテキストが

Question

を揃える私はこれがあります。 http://jsfiddle.net/bDTRz/

を私はそれがすべて無（私は幅が必要だと思うが、私はどこかわからない）コンテンツを問題では同じように見えるようにしたいです。私はすべてのテーブルで幅：100％でした。

「Idag」が表示されている場合、テキストが「古い」とどのように異なるかがわかります。これは、「古い」列のtdが「idag」のtd（時間のみ）よりも長い（日付+時刻）ためです。

どうすればこの問題を解決できますか？私は、私が試した、私はtd'sに幅を使用する必要が知っているが、それでも私はそれらのすべては、私がここまで今得て互いに

に合わせ作るために管理していませんでした： http://jsfiddle.net/79jH6/

しかし、まだそれを私が望むように整列していません。あなたのCSSの

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

、cellクラスの下で、

.cell{ 
    width:150px; 
} 

注意を追加します。これは、幅を持っているクラス名 『セル』を使用して、細胞（<TD>年代）のすべてが発生します150ピクセル。

また、あなたはあなたのTDクラス名を付け、幅を割り当てるために、あなたのスタイルシートを使用して、右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 3

を各セルの幅を指定することができます。この方法では、1つの場所で物事を変更するだけです。あなたはこのようにそれを行うことができ

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

.col1 { 
    width:50px; 
} 

.col2 { 
    width:60px; 
} 

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> 

、私は「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; 
} 

、あなたのレイアウトに合わせて幅を調整します。