html - 将嵌套表的列与父级对齐

Question

所以我有这样一张 table ，

<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

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

相反，不要使用表格进行布局，而是使用一些适当的语义标记。什么样的语义标记？如果不了解您的应用程序的上下文，则很难知道这一点。