html - 对齐单独的表格标签

Question

我正在使用反应引导。<td></td>我在“状态”、“开始时间”和“结束时间”列的标签内有表格。状态列将始终有一个值。开始时间和结束时间可能有也可能没有值。我需要确保行始终保持对齐。在下图中，我希望状态、开始时间和结束时间中的灰色框对齐/相同高度。

     <tr>
        <td>{rowData.fileType}</td>
        <td>{rowData.fileName}</td>
        <td><table><tbody>{getStatusNames(rowData.statuses)}</tbody></table></td>
        <td><table><tbody>{getStatusStartTimes(rowData.statuses)}</tbody></table></td>
        <td><table><tbody>{getStatusEndTimes(rowData.statuses)}</tbody></table></td>
        <td>deltatimes</td>
        <td>{rowData.errorMessage}</td>
    </tr>

标签： htmlcssreact-bootstrap

Answer 1

我有一个好主意，您可以为此使用行跨度。它没有回答你标题中的问题，但它正在解决你的问题。

table {
  width: 100%;
  border-collapse: collapse;
}

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

<table>
  <caption>Favorite and Least Favorite Things</caption>
  <tr>
    <th></th>
    <th></th>
    <th>Bob</th>
    <th>Alice</th>
    <th>The End</th>
  </tr>
  <tr>
    <th rowspan="2">Favorite</th>
    <th>Color</th>
    <td>Blue <br> color</td>
    <td>Purple</td>
    <th rowspan="4"> done </th>
  </tr>
  <tr>
    <th>Flavor</th>
    <td>Banana</td>
    <td>Chocolate <br> chips</td>
  </tr>
  <tr>
    <th rowspan="2">Least Favorite</th>
    <th>Color <br></th>
    <td>Yellow</td>
    <td>Pink</td>
  </tr>
  <tr>
    <th>Flavor</th>
    <td>Mint <br> cake</td>
    <td>Walnut</td>
  </tr>
</table>