HTML表在不同的细胞排列段落

Question

我想在HTML下表重现（从PDF检索）：

通知在同一小区内的段落如何与段落对齐在其他细胞中。

下面我给你看一个片断表：

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

<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>

如果段落完全适合细胞无换行符（删除“宽度”在<table>），一切都很好。但是，当表缩小（如代码段所示）时，会出现换行符，并且段落不再对齐（自然）。

我在这里看到的两种方法：

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

选项2是非常痛苦的程序，因为我编程建立这些表（从PDF），这意味着一个算法来细分表。

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

Answer 1

您需要为每列包含3 <td>的每行做一个<tr>，以便它们保持对齐，不需要<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>