排队嵌套表的母公司

问题描述：

<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> isntead排队用的<td>My 5th input</td>。我如何对齐它们？

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

你能重现与[的jsfiddle（http://jsfiddle.net）的问题，在这里分享呢？ – Gofilord 2014-08-28 20:11:23

请勿使用表格进行布局。表格布局仍然是布局！ – 2014-08-28 20:19:54

这完全有可能，但是您需要计算填充，边距和边框添加的大小，这对JS或JQuery可能会更好。然而，像其他人一样，最好的路径是避免桌子，并开始使用div – Devin 2014-08-28 20:46:59

答

最后一个标记中不需要嵌套表。第二行改成这样：

<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/

干净有需要。它说重复的原因，它在一个for循环。我想我可以说，所以我的坏。我会接受这个答案，因为它最接近我的解决方案。我以前需要这张表，但是最近在使用多个tbody标签时做了一些改动。通过这个更改，我可以简单地删除嵌套表并将循环行移动到常规主体，类似于您的建议。 – Shelby115 2014-08-29 00:32:07

答

，除非你将宽度设置为固定的东西，使像素完美修正这是不可能的嵌套的表格。 这种方法是高度难以维护的。

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

排队嵌套表的母公司

相关推荐