如何在行中使用不同數量的單元格創建表格？

我的想法一般來說：我有HTML表格裏面有自定義行。這是類似的例子： enter image description here 如何在行中使用不同數量的單元格創建表格？

在第一排

第二小區 - 應和行第一行的第6單元的約40％應該是第二排的雙重

第八單元應該是大〜40％

基本上這2行重複在我的表中。每個第二排可摺疊，並在第一排的第一個單元格中單擊摺疊。問題是當我摺疊和返回我的表更改列的大小和我的屏幕一直跳。我想這行總是相同的結構，但由於我有響應設計，我不想爲每個單元格設置確切的寬度。

我試過一打變種，有colspan和％的寬度，但是沒有任何效果。這是我最新的結果：

<tr class="mattersRow"> 

    <td colspan="4"> 
     <a href="#collapse63" data-toggle="collapse"></a> 
    </td> 
    <td class="editableCell qbmatter" colspan="14"></td> 
    <td class="editableCell workDate" colspan="4"></td> 
    <td class="editableCell hours" colspan="2"></td> 
    <td class="editableCell person" colspan="6"></td> 
    <td class="rate" colspan="2"></td> 
    <td class="editableCell amount" colspan="4"></td> 
    <td align="center"></td> 

</tr> 
<tr id="collapse63" class="helpRow in" style="height: auto;"> 

    <td colspan="2"></td> 
    <td colspan="2"></td> 
    <td colspan="2"></td> 
    <td colspan="4"></td> 
    <td colspan="2"></td> 
    <td colspan="4"></td> 
    <td colspan="2"></td> 
    <td colspan="16"></td> 
    <td colspan="4"></td> 

</tr>

你能幫助我正確地構建該行...

來源

2014-01-07 Bryuk

這樣的表建設發電機是否必須是表？ Div's更現代化，並且可以更輕鬆地完成這項工作，儘管您可以通過NESTED TABLES實現您的目標。如在中，較小的行應該是父表內的它們自己的表。 – Mike

我會用嵌套表。 –

你在正確的軌道上，但表格被設計成在同一個點上有行和列結束，所以在第一行第二個單元格的右邊有一點額外的空間，將需要大量的工作來複制，或者只是讓他們更容易排隊。否則，你將開始進入嵌套表格，這將是更多的工作，而不是它的價值。你總是可以使用像TableGenerator

來源

2014-01-07 21:25:41

感謝您的鏈接！非常有幫助=） – Bryuk

爲了得到那種變化，你需要有2個不同的表，因爲它會嘗試對齊TD的

來源

2014-01-07 21:23:23 0xFADE

我會強烈建議把這些與造型divs。很明顯，你沒有使用表格數據 - 因爲你用它來佈局，我建議你看看這個問題here。這可以通過一些簡單的css輕鬆實現。

來源

2014-01-07 21:23:53 kddeisz

如何在行中使用不同數量的單元格創建表格？

回答

相關問題