排隊嵌套表的母公司

列所以我有一個表像這樣，排隊嵌套表的母公司

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

來源

2014-08-28 Shelby115

你能重現與[的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/

來源

2014-08-28 20:28:10 jessikwa

乾淨有需要。它說重複的原因，它在一個for循環。我想我可以說，所以我的壞。我會接受這個答案，因爲它最接近我的解決方案。我以前需要這張表，但是最近在使用多個tbody標籤時做了一些改動。通過這個更改，我可以簡單地刪除嵌套表並將循環行移動到常規主體，類似於您的建議。 – Shelby115 2014-08-29 00:32:07

，除非你將寬度設置爲固定的東西，使像素完美修正這是不可能的嵌套的表格。 這種方法是高度難以維護的。

相反，不要使用表格進行佈局，並使用一些適當的語義標記。什麼樣的語義標記？如果不知道應用程序的上下文，很難知道。

來源

2014-08-28 20:22:10

排隊嵌套表的母公司

回答

相關問題