HTMLテーブル：列の幅の割合

Question

私は7列のテーブルを持っています。私は、列は、以下の幅のようにしたい：

• 3列のx width=20%
• 4列のx width=10%

私は2つのCSSクラス、幅ごとに1つずつ作成していると私はそれらを割り当てています各セル。

私が持っているものは動作しません。代わりに、幅は常にコンテンツをラップします。私は大きな文字列を置く場合、私はちょうど1文字を置く場合は、幅が非常に小さくなるよりも、幅が大きすぎるだろう。私はそれが一定したい。

CSS & HTML：

table { 
 
    width: 100%; 
 
} 
 
.ten { 
 
    width: 10% 
 
} 
 
.twenty { 
 
    width: 20%; 
 
}

<table> 
 
    <tr> 
 
    <th class="ten">H1</th> 
 
    <th class="ten">H2</th> 
 
    <th class="ten">H3</th> 
 
    <th class="twenty">H4</th> 
 
    <th class="twenty">H5</th> 
 
    <th class="twenty">H6</th> 
 
    <th class="ten">H7</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="ten">A1</td> 
 
    <td class="ten">A2</td> 
 
    <td class="ten">A3</td> 
 
    <td class="twenty">A4</td> 
 
    <td class="twenty">A5</td> 
 
    <td class="twenty">A6</td> 
 
    <td class="ten">A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="ten">B1</td> 
 
    <td class="ten">B2</td> 
 
    <td class="ten">B3</td> 
 
    <td class="twenty">B4</td> 
 
    <td class="twenty">B5</td> 
 
    <td class="twenty">B6</td> 
 
    <td class="ten">B7</td> 
 
    </tr> 
 

 
</table>

誰かが私が欲しいものを達成する方法を説明してもらえますか？

Answer 1

table-layout:fixed;を使用すると、幅を固定できます。

colgroup and colタグを使用して、一度の幅とbgを列に割り当てることもできます。

table { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.ten { 
 
    width: 10%; 
 
    background: tomato; 
 
} 
 
.twenty { 
 
    width: 20%; 
 
    background: turquoise 
 
} 
 
/* see me */ 
 
td { 
 
    border: solid; 
 
} 
 
/* play with bg cells and cols ? */ 
 

 
tr:nth-child(even) :nth-child(odd) { 
 
    background:rgba(100,255,50,0.3); 
 
    } 
 
tr:nth-child(odd) :nth-child(even) { 
 
    background:rgba(255,255,255,0.3); 
 
    }

<table> 
 
    <colgroup> 
 
    <col class="ten" /> 
 
    <col class="ten" /> 
 
    <col class="ten" /> 
 
    <col class="twenty" /> 
 
    <col class="twenty" /> 
 
    <col class="twenty" /> 
 
    <col class="ten" /> 
 
    </colgroup> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    <th>H4</th> 
 
    <th>H5</th> 
 
    <th>H6</th> 
 
    <th>H7</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    <td>A5</td> 
 
    <td>A6</td> 
 
    <td>A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    <td>B5</td> 
 
    <td>B6</td> 
 
    <td>B7</td> 
 
    </tr> 
 
<tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    <td>A5</td> 
 
    <td>A6</td> 
 
    <td>A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    <td>B5</td> 
 
    <td>B6</td> 
 
    <td>B7</td> 
 
    </tr> 
 

 
</table>

Answer 2

は、あなたのCSSに

td { 
    word-break: break-all; 
    //or 
    word-wrap: break-word; 
} 

word-break: break-all;これを追加word-wrap: break-wordがしますが

max-dimension 

が

max- 
dimension 

になります次の行に長い単語をラップが、全体単一の単語を維持しますセルに収まる限り、任意の場所で単語を切り取ります。

max-dimension 

は

max-dim 
ension 

Answer 3

期待通りにあなたのCSSは、テーブルヘッドとセルの幅が正しいことのように、作品になる可能性があります。ただし、

thはデフォルトでtext-align：centerが適用されますが、td要素には適用されません。

したがって、同じテキストアライメントのいずれかを追加する必要があります。例：

th { 
    text-align: left; 
}