Question

所以我有一张这样的表，

<table>
   <tbody>
      <tr>
         <td colspan="6">My 6 headers</td>
      </tr>
       <tr>
         <td colspan="6">My 6 inputs</td>
      </tr>
      <tr>
         <td colspan="3">Indent 3 columns</td>
         <td colspan="3">
             <table>
                 <tbody>
                     <tr>
                         <td>repeating column 1</td>
                         <td>repeating column 2</td>
                         <td>repeating column 3</td>
                     </tr>
                 </tbody>
             </table>
         </td>
      </tr>
   </tbody>
</table>

我的问题是<td>repeating column 1</td>与<td>My 4th input</td>列对齐，但<td>repeating column 2</td>在<td>repeating column 1</td>之后立即开始而不是与<td>My 5th input</td>对齐。我该如何对齐它们？

jsFiddle：http://jsfiddle.net/pL89ykLp/

Answer 1

嵌套表是不可能的，除非您将宽度设置为固定的值，并使像素完美校正。 这种方法非常难以维护。

相反，不要使用表格进行布局，并使用一些适当的语义标记。什么样的语义标记？在不知道申请背景的情况下，很难知道。

Answer 2

最后一个标签中不需要嵌套表。将第二行更改为：

  <tr>
     <td colspan="3">Indent 3 columns</td>
     <td>column 1</td>
     <td>repeating column 2 </td>
     <td>repeating column 3</td>
  </tr>

小提琴： http://jsfiddle.net/9ywaqf1L/

将嵌套表的列排成父级

2 个答案: