テーブル行が整列していない

Question

次のフィドルに2つのテーブルがあります。行はヘッダーに揃えられていません。これは最初のテーブルのコードです

<table class=" table-bordered"> 
    <tr> 
     <th>Doc Name:</th> 
     <th>Atom Type:</th> 
     <th>Cluster Method:</th> 
     <th>k:</th> 
     <th> 
      <small>Stylistic Feature(s):</small> 
     </th> 
    </tr> 
    <tr> 
     <td style="font-size: 10px;">rowling_and_dickens</td> 
     <td style="font-size: 10px;">sentence</td> 
     <td style="font-size: 10px;">kmeans</td> 
     <td style="font-size: 10px;">2</td> 
     <td style="font-size: 10px;">hapax_dislegomena;honore_r_measure;hapax_legomena;</td> 
    </tr> 
</table> 

他のテーブルも同様のパターンに従います。私はスペースの不足のためにここにそれらを追加していません。

https://jsfiddle.net/fk6fnto4/

私のテーブルの行には関係なく、私は何をすべきか適切に配置しないされません。私は多くのソリューションを見て、それに応じてコードを修正しました。ここで何が間違っているのかを教えてください。

Answer 1

カラムの内容を整列させるには、幅を固定する必要があります。現在、各セルには必要なだけのスペースが必要です。最初の列は最小の幅を持ち、3番目の列は最も幅が広いはずです。他の列はすべて5桁の数字を含むので、同じ幅にすることができます。私たちはそれぞれに異なるクラスを使用することができます異なるtd幅を設定するには、それが厄介かもしれないので、私たちはこのようになりますnth-child()セレクタ使用します：これは最初の子であるすべてのtd要素の幅を設定し

td:nth-child(1) { 
    width: 10% 
} 

を親の10％になる。あなたがすべきことは、それは次のようになりますので、自分のスタイルにこれを追加することです：

<style> 
    .container { 
    margin-left: 0; 
    } 

    tbody { 
    display: block; 
    max-height: 500px; 
    overflow-y: scroll; 
    } 

    thead, 
    tbody tr { 
    display: table; 
    width: 100%; 
    } 

    thead { 
    width: 100%; 
    } 

    table { 
    width: 200px; 
    } 

    td:nth-child(1) { 
    width:10% 
    } 

    td:nth-child(3) { 
    width:30% 
    } 

</style> 

これが何を意味するのか最初の列はtbody幅の10％を取るということです、3つ目は、30％を取るだろう、と他の人はそれぞれ20％を使用します。ただし、可変長のデータも含まれている場合は、同様のルールを追加する必要があります。

このようにして、列の内容は中央に揃えられます。異なるアラインメントを設定するには、text-alignプロパティを使用します。