スクロールテーブルのthead内での垂直方向の整列tbody

Question

テーブルのヘッダーがあります。thの値が折り返し、一部が折り返されています。ヘッダーの末尾にすべての値と境界線を揃えることができません。ここでのコードの作業

：JSFiddle

は、私は次のことを試してみましたが、それは効果がありませんでした：

th { 
    vertical-align: bottom; 
} 

Answer 1

は、テーブルとその要素のための表示を上書きしないでください。あなたはHTMLテーブルを使用し、それをCSS経由でブロックに変更しました。どうして？

.table, 
thead, 
tbody, 
tr, 
th, 
td { 
    display: block; 
} 

また、あなたは、テーブルセルをフロートさせることはできません。

はこれを削除します。

この削除：OPは、彼が固定ヘッダと、私は彼の要件に基づいて、次のことをお勧めスクロール可能なコンテンツを持つテーブルを望んで述べられた後：

th, 
td { 
    float: left; 
    width: 25%; 
} 

---

UPDATEを。次のソリューションは、固定列幅と列数を持つ元のコードに基づいています。私はこの種の解決策が嫌いですが、この場合は十分です。

/* Set table layout to fixed to prevent uneven column widths */ 
.table { 
    table-layout: fixed; 
} 

/* Set the thead and tbody only to display block */ 
.table thead, .table tbody { 
    display: block; 
} 

/* Enable table layout again for each row */ 
.table tr { 
    width: 100%; 
    display: table; 
} 

ここに全コード：https://jsfiddle.net/zazgh8u9/9/

Answer 2

ここで多くは非常に技術的な 1を取得したいと私は長い説明を行います）のセルにdisplay: blockを使用して、あなたはしかし、次の行に移動するすべてのセルを引き起こしまた、floatを使用して、セルが「インライン」になるようにします。また、フローティング要素はブロック表示を行います。したがって、ここには冗長性があります。

2）垂直アライメントを実行しようとしている場合は、他の方法を見つける必要がある垂直アライメント（このプロパティはインラインブロックまたはテーブルセル表示でのみ機能します）を使用できます。

3）セルに幅を与えているため、テキストが折り返しています。要素に高さを与えず、オーバーフローが非表示に設定されていない場合は、必要に応じて折り返してすべてのテキストに対応するように高さを設定します。この場合、いくつかのオプションがあります。1）テキストを省略記号で切り捨て、次の行に折り返す、またはオーバーフローを非表示にする。