在不同单元格中具有对齐段落的HTML表格

Question

我试图在HTML中重现下表（从PDF中检索）：

注意同一单元格上的段落如何与其他单元格中的段落对齐。

下面我将向您展示一个代码段中的表格：

＆＃13;

＆＃13;

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

＆＃13;

<table style="width:50%">
  <tr>
    <td rowspan="2">
      <p>Procedimentos</p>
    </td>
    <td colspan="2">
      <p>Taxas (euros)</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>Obtenção</p>
    </td>
    <td>
      <p>Renovação</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>1 —</p>
      <p>2 —</p>
      <p>3 —</p>
      <p>4 — Produtor de semente de variedades de conservação</p>
      <p>5 — Acondicionador de semente de variedades de conservação</p>
    </td>
    <td>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>200</p>
      <p>150</p>
    </td>
    <td>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>30</p>
      <p>15</p>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

如果段落完全适合没有换行符的单元格（删除＆＃34;宽度＆＃34;在<table>中），一切正常。但是，当表缩小时（如代码段所示），有一个换行符，段落不再对齐（自然）。

我在这里看到两种方法：

1. 通过CSS，我不知道如何。
2. 通过HTML，通过细分整个表格，使每个段落对齐成为新的表格行。

选项2.编程非常痛苦，因为我以编程方式（从PDF）构建这些表，这意味着一种细分表的算法。

有谁知道如何强制段落应保持对齐的约束？这有可能在CSS（支持跨浏览器）吗？

Answer 1

您需要为每列包含3 <tr>的每一行<td>，以便它们保持一致，不需要<p>。

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  vertical-align: middle;
}
td {border-top: none; border-bottom: none;}
th, td {padding: 12px 16px;}

<table style="width:50%">
  <tr>
    <th rowspan="2"> <!-- use th for border -->
      Procedimentos
    </th>
    <th colspan="2">
      Taxas (euros)
    </th>
  </tr>
  <tr>
    <th>
      Obtenção
    </th>
    <th>
      Renovação
    </th>
  </tr>
  <tr>
    <td> <!-- use td for no border -->
      1 —
    </td>
    <td>
      ...
    </td>
    <td>
      ...
    </td>
  </tr>
  <tr>
    <td>
      2 —
    </td>
    <td>
      ...
    </td>
    <td>
      ...
    </td>
  </tr>
  <tr>
    <td>
      3 —
    </td>
    <td>
      ...
    </td>
    <td>
      ...
    </td>
  </tr>
  <tr>
    <td>
      4 — Produtor de semente de variedades de conservação
    </td>
    <td>
      200
    </td>
    <td>
      30
    </td>
  </tr>
  <tr>
    <td>
      5 — Acondicionador de semente de variedades de conservação
    </td>
    <td>
      150
    </td>
    <td>
      15
    </td>
  </tr>
</table>

Answer 2

正如@Heah所写，您需要将数据放在单独的行中。这对于可访问性来说也更好，因为它对应于数据的逻辑结构，并允许项目作为表格单元格访问，而不是作为单元格内的段落。

此外，要重现PDF文件的布局，您需要在每个方向上以更详细的方式设置边框，并减少标题单元格中的字体大小。以下是相对准确的，除了它不产生点行（这是一个单独的问题，经常在SO上问 - 没有简单的答案，但有几种可能的方法）。

<style>
table {
  width: 26em;
  border: solid;
  border-width: 3px 0;
  border-collapse: collapse;
}
th, td { 
  vertical-align: bottom;
  text-align: center;
  border: solid 2px gray;
}
td {
  border-top: none;
  border-bottom: none;
}
td:first-child {
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
}
th {
  padding: 0.3em 0.4em;
  font-weight: normal;
  vertical-align: middle;
  font-size: 80%;
}
th:first-child, td:first-child {
  border-left: none;
}
th:last-child, td:last-child {
  border-right: none;
}
</style>
<table>
<thead>
<tr><th rowspan="2">Procedimentos
    <th colspan="2">Taxas (euros)
<tr><th>Obtenção
    <th>Renovação
</thead>
<tbody>
  <tr>
      <td>1 —
      <td>…
      <td>…
  <tr>
      <td>2 —
      <td>…
      <td>…
  <tr>
      <td>3 —
      <td>…
      <td>…
  <tr>
      <td>4 — Produtor de semente de variedades de conservação
      <td>200
      <td>30
  <tr>
      <td>5 — Acondicionador de semente de varie­dades de conservação
      <td>150
      <td>15
</tbody>
</table>