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标签一次将宽度和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>