HTML表:列宽百分比 [英] HTML table: column width percentage
问题描述
我有一个7列的表格。我希望列的宽度如下:
I have a table with 7 columns. I want the columns to be of the following widths:
- 3列x
width = 20%
- 4列x
width = 10%
- 3 columns x
width=20%
- 4 columns x
width=10%
我创建了2个CSS类,每个宽度一个,并且我将它们分配给每个单元格。
I have created 2 CSS classes, one per width and I am assigning them to each cell.
我所拥有的东西是行不通的。相反,宽度总是包裹内容。如果我只放一个字母,则宽度会很小,如果我放大字符串,则宽度会太大。我希望它不变。
The thing I have, and that does not work is this. Instead, the width always wraps the content. If I just put one letter, than the width will be very small, if I put large string, the width will be too big. I want it constant.
CSS& HTML:
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>
有人可以解释吗如何实现我想要的?
Could someone explain how to achieve what I want?
推荐答案
要固定宽度,可以使用 table-layout:fixed;
。
To fixe width, you can use table-layout:fixed;
.
您可能还想使用 colgroup
和 col
标记可一次将宽度和bg分配给您的列。
You may also want to use the colgroup
and col
tags to assign at once width and bg to your columns.
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>
这篇关于HTML表:列宽百分比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!