HTML 表格：列宽百分比

Question

我有一个有 7 列的表。 我希望列具有以下宽度：

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

我创建了 2 个 CSS 类，每个宽度一个，并将它们分配给每个单元格。

我所拥有的，但不起作用的是这个。 相反，宽度总是包裹内容。 如果我只放一个字母，宽度会非常小，如果我放大字符串，宽度会太大。 我想要它恒定。

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和col标签一次将width和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按预期工作，其方式是表头和单元格的宽度正确。 然而：

th默认具有文本对齐：施加中心，而td元件还没有。

所以你应该添加到td或相同的文本对齐。 例如：

th {
    text-align: left;
}

Answer 3

将其添加到您的CSS中

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

word-break: break-all; 将长单词包装到下一行，但会保持单个单词的整体

max-dimension

会变成

max-
dimension

尽管word-wrap: break-word会在任何地方切断一个单词，只要它适合单元格。

max-dimension

可能成为

max-dim
ension