html - 任何人都可以建议在子表中没有正确对齐

Question

任何人都可以建议在子表中没有正确对齐。在我的应用程序中，父表中有 10 列。在子表中，父表中的标题没有正确对齐。任何人都可以建议

<table>
  <tr>
    <th> header1 </th>
    <th> header2 </th>
    <th> header3</th>
    <th> header4</th>
    <th> header5</th>
    <th> header6</th>
    <th> header7</th>
    <th> header8</th>
    <th> header9</th>
    <th> header10</th>
  </tr>
  <tr>
    <td><input type="checkbox" /> </td>
    <td>Test1 </td>
    <td colspan="8"> Test2</td>
  </tr>
  <tr>
    <td colspan="10">
      <table>
        <tr>
          <td>Test1 </td>
          <td>Test2 </td>
          <td>Test3 </td>
          <td>Test4 </td>
          <td>Test5 </td>
          <td>Test6 </td>
          <td>Test7 </td>
          <td>Test8 </td>
          <td>Test9 </td>
          <td>Test10 </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

谢谢

标签： htmlcsshtml-table

Answer 1

您的单元格应位于同一层次结构中，以便该colspan属性按您预期的方式发生。

只需删除嵌套<table>：

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

<table>
  <tr>
    <th> header1 </th>
    <th> header2 </th>
    <th> header3</th>
    <th> header4</th>
    <th> header5</th>
    <th> header6</th>
    <th> header7</th>
    <th> header8</th>
    <th> header9</th>
    <th> header10</th>
  </tr>
  <tr>
    <td><input type="checkbox" /> </td>
    <td>Test1 </td>
    <td colspan="8"> Test2</td>
  </tr>
  <tr>
    <td>Test1 </td>
    <td>Test2 </td>
    <td>Test3 </td>
    <td>Test4 </td>
    <td>Test5 </td>
    <td>Test6 </td>
    <td>Test7 </td>
    <td>Test8 </td>
    <td>Test9 </td>
    <td>Test10</td>
  </tr>
</table>