Question

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

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

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

我拥有的东西，这是行不通的。相反，宽度始终包含内容。如果我只放一个字母，比宽度会很小，如果我放大字符串，宽度会太大。我希望它不变。

CSS＆amp; 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按预期工作，表格头和单元格的宽度正确。但是：

th默认情况下已应用text-align：center，而td元素则未应用。

所以你应该添加到td或相同的文本对齐。 E.g：

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

HTML表格：列宽百分比

3 个答案: