设置 tr 的 100% 宽度

Question

我有以下 table:

我希望从第二列开始的行填充以下三列。换句话说，年份列必须填写 table 的 25%（与“Anio”相同），而年份行内的其他两行必须填写 table 的 75% （第二、三、四列（各占25%）），"OSDE"里面的另外两个要填table（第三、四列）的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>

Answer 1

代码中的两个主要问题：

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

2.) 您不得在 tr 中嵌套 tr（您只能嵌套包含 table、 trs 和 tds，并且仅在 tds 内）。请注意创建完整的行，其中 td 的数量在所有行中都相同，还要考虑前几行中所有单元格的 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>

设置 tr 的 100% 宽度

Set 100% width of tr

html

html-table