设置 tr 的 100% 宽度答案

【问题标题】：Set 100% width of tr设置 tr 的 100% 宽度
【发布时间】：2022-01-20 09:16:06
【问题描述】：

我有下表：

我希望从第二列开始的行填充以下三个列。换句话说，年份列要填满表格的 25%（与 "Anio" 相同），而年份行内的其他两行必须填满表格的 75%（第二、第三和第四列）（每个 25%）），而“OSDE”中的其他两个必须填充 50% 的表格（第三和第四列）。

我有这个（我正在用 js 构建它）：

<table width="100%">
  <tr>
    <th width="25%">Anio</th>
    <th width="25%">Obra social</th>
    <th width="25%">Doctor</th>
    <th width="25%">Valor</th>
  </tr>
  <tr>
    <td width="25%" rowspan="2">2018</td>
    <tr>
      <td width="25%" rowspan="2">OSDE</td>
      <td>medico1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>medico2</td>
      <td>2</td>
    </tr>
  </tr>
  <tr>
    <tr>
      <td width="25%" rowspan="2">UP</td>
      <td>medico1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>medico2</td>
      <td>2</td>
    </tr>
  </tr>
  <tr>
    <td width="25%" rowspan="2">2019</td>
    <tr>
      <td width="25%" rowspan="2">OSDE</td>
      <td>medico1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>medico2</td>
      <td>2</td>
    </tr>
  </tr>
  <tr>
    <tr>
      <td width="25%" rowspan="2">UP</td>
      <td>medico1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>medico2</td>
      <td>2</td>
    </tr>
  </tr>
</table>

【问题讨论】：

标签： html html-table

【解决方案1】：

代码中的两个主要问题：

1.) 包含年份的单元格需要rowspan="4"（它们跨越 4 行）

2.) 您不得在tr 中嵌套tr（您只能嵌套由table、trs 和tds 组成的完整表，并且仅在tds 内）。请注意创建所有行中tds 的数量相同的完整行，同时还要考虑前行中所有单元格的rowspan 设置。

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #ccc;
}

<table width="100%">
  <tr>
    <th width="25%">Anio</th>
    <th width="25%">Obra social</th>
    <th width="25%">Doctor</th>
    <th width="25%">Valor</th>
  </tr>
  <tr>
    <td width="25%" rowspan="4">2018</td>
    <td width="25%" rowspan="2">OSDE</td>
    <td>medico1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>medico2</td>
    <td>2</td>
  </tr>
  <tr>
    <td width="25%" rowspan="2">UP</td>
    <td>medico1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>medico2</td>
    <td>2</td>
  </tr>
  <tr>
    <td width="25%" rowspan="4">2019</td>
    <td width="25%" rowspan="2">OSDE</td>
    <td>medico1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>medico2</td>
    <td>2</td>
  </tr>
  <tr>
    <td width="25%" rowspan="2">UP</td>
    <td>medico1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>medico2</td>
    <td>2</td>
  </tr>
</table>

【讨论】：