html - 表の列を揃える HTML

Question

最終的に、Web サイトのページのテーブルの列を揃えることができました。私は解決策を見つけましたが、私はそれを理解していません。これは私が用意したフィドルです。削除すると

display: block

CSS から、列は完全に中央に配置されます。

その命令が何を問題にしているのかがよくわからないのは事実ですが、それは要素がブロック要素として表示されているということではないでしょうか? 要素 (特に raw) が行全体を埋めるようにすべきではありませんか?

Answer 1

テーブルの幅は、コンテンツに合わせて (ページの全幅ではなく) 自動的に設定されるため、追加するdisplay:block;と、この特定の幅がいっぱいになります。

テーブルの幅を div の幅 (ページの幅に設定) に指定すると、期待どおりの結果が得られます。

table{
  width: 100%;
}
.books tr{
  display: block;
  padding-bottom: 20px;
}

Answer 2

問題は、テーブルの幅がページ全体にないこと、またはテーブルをラップしている要素がないことです。すべてのコンテンツを表示するのに十分な幅であるため、期待される結果を表示するには、テーブルを 100% 幅に設定する必要があります。

テーブルを表示するために余分な境界線を追加しました。

http://cssdeck.com/labs/ays6idqs

table { width: 100%; border: 1px solid red; }

Answer 3

私自身、テーブルに少し混乱していますが、説明するために最善を尽くします。

display: block;列の配置を破壊する理由は、テーブルの構造を作成するために値とdisplay: table-row;連携して使用されるデフォルトをオーバーライドしているためです。<td>display: table-cell:

表を作成するときは、表の全体の幅を指定してから、各列が取得する部分をwidthHTML の属性で宣言することをお勧めします。

そう、

HTML:

<td width='50%'>

CSS:

.books table {
  width:100%;  /* or whatever your desired width is */
}
.books tr{
  padding-bottom: 20px;
}

.books td{
    text-align: center;
    padding-bottom: 5px;
    font-size: 12pt;
    position: relative;
}

それ以外の、

HTML:

<td>

CSS:

.books tr{
  padding-bottom: 20px;
}

.books td{
    width: 30%;
    text-align: center;
    padding-bottom: 5px;
    font-size: 12pt;
    position: relative;
}