Question

我正在做项目，并创建了一个表格，但是某些<td>元素不能与width属性一起使用。请查看我的代码，然后找出错误的部分。

table:nth-child(1) tr:nth-child(1) td:nth-child(1) {
  width: 12%
}

table:nth-child(1) tr:nth-child(1) td:nth-child(2) {
  width: 28%
}

table:nth-child(1) tr:nth-child(1) td:nth-child(3) {
  width: 10%
}

table:nth-child(1) tr:nth-child(1) td:nth-child(4) {
  width: 25%
}

table:nth-child(1) tr:nth-child(1) td:nth-child(5) {
  width: 8%
}

table:nth-child(1) tr:nth-child(1) td:nth-child(6) {
  width: 16%
}

table:nth-child(1) tr:nth-child(3) td:nth-child(1) {
  width: 24%;
}

table:nth-child(1) tr:nth-child(3) td:nth-child(2) {
  width: 6%;
}

<table>
  <tr>
    <td rowspan="6">
      <p>전형유형</p>
    </td>
    <td rowspan="2" colspan="2">
      <p class="leftAlignText"><input type="checkbox">일반전형</p>
    </td>
    <td rowspan="6">
      <p>지원자<br/>특기<br/>사항</p>
    </td>
    <td rowspan="3">
      <p class="leftAlignText"><input type="checkbox">국가유공자 자녀</p>
    </td>
    <td rowspan="6">
      <p>지역</p>
    </td>
    <td rowspan="3">
      <p class="leftAlignText"><input type="checkbox">대전</p>
    </td>
  </tr>

  <tr>
  </tr>

  <tr>
    <td rowspan="2">
      <p class="leftAlignText"><input type="checkbox" />마이스터인재전형</p>
    </td>
    <td rowspan="4">
      <p>특별<br/>전형</p>
    </td>
  </tr>

  <tr>
    <td rowspan="3">
      <p class="leftAlignText"><input type="checkbox">특례입학 대상자</p>
    </td>
    <td rowspan="3">
      <p class="leftAlignText"><input type="checkbox" />전국</p>
    </td>
  </tr>

  <tr>
    <td rowspan="2">
      <p class="leftAlignText"><input type="checkbox" />사회통합 전형</p>
    </td>
  </tr>

  <tr>
  </tr>
</table>

我该如何解决这个问题？

Answer 1

将table-layout: fixed添加到表格中。默认情况下，table-layout是auto，这使得表的行为如下：

每个单元格（<td>和<th>）的宽度将与其内容一致，因此，最宽的单元格将具有最多的内容。
任何未由内容设置的宽度都会自动分配（这通常会使列以不对称的不吸引人的模式出现在各种宽度上）

具有table-layout: fixed的表格可以更好地控制宽度：

将使用明确设置为单元格（最好是<th>）的宽度。
始终将宽度分配给每一列，这样它们将在表宽度的总和中等于表宽度的100％，否则多余的宽度将自动分配（这违背了使用table-layout: fixed的目的）。

关于宽度的一般信息：

除非有<tr>和/或colspan，否则一行（rowspan）的单元格总宽度应始终为100％，在这种情况下，该行具有最大的行数单元的数量将控制整个宽度分布。

table {
  table-layout: fixed;
  border-collapse: collapse;
}

caption {
  caption-side: bottom;
}

td {
  outline: 1px solid #000
}

.left {
  text-align: left;
}

var {
  display: block;
  text-align: center;
  font-weight: 900;
  color: tomato
}

<table>
  <caption><var>100%</var></caption>
  <thead>
    <tr>
      <th width='12%'></th>
      <th width='22%'></th>
      <th width='6%'></th>
      <th width='12%'></th>
      <th width='22%'></th>
      <th width='12%'></th>
      <th width='14%'></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="6">
        <p>전형유형</p>
        <var>12%</var>
      </td>
      <td rowspan="2" colspan="2">
        <p class="left"><input type="checkbox">일반전형</p>
      </td>
      <td rowspan="6">
        <p>지원자<br/>특기<br/>사항</p>
        <var>12%</var>
      </td>
      <td rowspan="3">
        <p class="left"><input type="checkbox">국가유공자 자녀</p>
        <var>22%</var>
      </td>
      <td rowspan="6">
        <p>지역</p>
        <var>12%</var>
      </td>
      <td rowspan="3">
        <p class="left"><input type="checkbox">대전</p>
        <var>14%</var>
      </td>
    </tr>

    <tr>
    </tr>

    <tr>
      <td rowspan="2">
        <p class="left"><input type="checkbox">마이스터인재전형</p>
        <var>22%</var>
      </td>
      <td rowspan="4">
        <p>특별<br/>전형</p>
        <var>6%</var>
      </td>
    </tr>

    <tr>
      <td rowspan="3">
        <p class="left"><input type="checkbox">특례입학 대상자</p>
      </td>
      <td rowspan="3">
        <p class="left"><input type="checkbox">전국</p>
      </td>
    </tr>

    <tr>
      <td rowspan="2">
        <p class="left"><input type="checkbox">사회통합 전형</p>
      </td>
    </tr>

    <tr>
    </tr>
  </tbody>
</table>

如何解决表格TD宽度的问题

1 个答案: