HTML 表格：列宽百分比

HTML table: column width percentage

提问by wesleyy

I have a table with 7 columns. I want the columns to be of the following widths:

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

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

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

I have created 2 CSS classes, one per width and I am assigning them to each cell.

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

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?

有人可以解释如何实现我想要的吗？

回答by G-Cyrillus

To fixe width, you can use table-layout:fixed;.

要固定宽度，您可以使用table-layout:fixed;.

You may also want to use the colgroupand coltags to assign at once width and bg to your columns.

您可能还想使用colgroup和col标签一次为您的列分配宽度和背景。

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>

回答by Kees van Lierop

Your CSS works as expected, in a way that the widths of the table heads and cells are correct. However:

您的 CSS 按预期工作，表格标题和单元格的宽度是正确的。然而：

thby default have text-align: center applied, while the tdelement has not.

th默认情况下应用 text-align: center ，而td元素没有。

So you should add either to the td or th the same text alignment. E.g.:

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

th {
    text-align: left;
}

回答by VDWWD

Add this to your CSS

将此添加到您的 CSS

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

word-break: break-all;wraps long words to the next line, but will keep single words whole

word-break: break-all;将长单词换行到下一行，但将保持单个单词完整

max-dimension

will become

会变成

max-
dimension

While word-wrap: break-wordwill cut off a word an any place as long as it will fit the cell.

虽然word-wrap: break-word将切断一个字的任何地方，只要它会适应单元格。

max-dimension

could become

可以成为

max-dim
ension