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>