HTML表格 - 如何讓子表格的列具有與父表格列相同的寬度？

所以，我有一張桌子內的表格（在TD內）。HTML表格 - 如何讓子表格的列具有與父表格列相同的寬度？

此子表的列數與父表的列數完全相同。

唯一的問題是，子表的列與父表的列不是相同的寬度。

這是它的樣子：

enter image description here

我應該如何樣式子表？

是否有預定義的方法來解決這個問題？

或者我需要通過jquery寫一個「規範化」函數，這將改變頁面加載的列寬度？

來源

2011-12-21 Tool

使用適當的合併單元格，它應該工作，假設你有沒有什麼CSS來改變，因爲你還沒有標記這個問題爲CSS – defau1t 2011-12-21 18:01:02

我在TD上沒有合併單元格= 15。（父母有15列），如果這就是你的意思。但仍然是這樣。 – Tool 2011-12-21 18:05:48

好的，你需要確保寬度設置正確。那麼你可以利用css文本 - 省略號屬性 – defau1t 2011-12-21 18:14:14

function normaliseWidth(id) 
{ 
    iter = 1; 
    $("#splitForm" + id + " td").each(function() { 
     //alert($(this)); 
     $(this).width($("#" + id + " td:nth-child(" + iter + ")").width()); 
     ++iter; 
    }); 
}

我只是遍歷所有的td，並將其寬度更改爲父寬度。

這似乎已修復它。我希望不會有任何副作用。感謝所有的幫助。

來源

2011-12-21 18:23:41 Tool

爲什麼你需要創建另一個表，如果他們有相同數量的列。您應該添加一行而不是另一個表。這樣你的專欄將是相同的。

問題是你的內表的內容是推動單元格的寬度。

來源

2011-12-21 17:54:20

我有我的理由 - 在這種情況下，這是因爲我需要用表單包圍行。如果你用表單包圍了一行 - 這是無效的HTML，所以我需要在TD內部的整個表。這就是其中一個原因 - 這是數據表插件的一部分，它以這種方式工作 - 他們在點擊行後添加一個新表。 – Tool 2011-12-21 17:56:46

在這種情況下，確保父表格列的寬度是其內部寬度的基礎。因此，調整內部表格的寬度以適應內容寬度，然後調整其父寬度。 – 2011-12-21 18:02:16

你能編輯你的文章並進一步闡述嗎？我不知道如何去做你所描述的。 – Tool 2011-12-21 18:03:46

答案是一對夫婦不同的東西。

最快的方法是將類添加到每列（並確保它們在父/子之間配對）。我通常使用「col-」前綴。將你的寬度設置爲類，你應該更接近。

此外，一定要刪除任何邊界，填充，利潤等，如果它仍然心不是完全正確考慮border-collapse

來源

2011-12-21 18:03:06 PseudoNinja

如果你被迫這樣做的，要麼明確使用指定每一列的寬度CSS或兩個表中的HTML屬性。

您也可以編寫加載頁面後發生的JavaScript代碼，以調整該頂部表的列大小以匹配底部表。您的里程可能會因此而有所不同。

你在另一個關於需要每行表單的答案中的評論讓我覺得你可以修改你的佈局以將表單放在表格周圍，並將兩個表格組合起來，使表頭和數據行位於同一個表格中。然後進行一些後端代碼更改以不同方式處理帖子。

來源

2011-12-21 18:21:38 slolife

嘗試使用rowspan屬性而不是嵌套表。如果你需要說3組數據，但是希望它們全都具有相同的標題（在左側），將左側單元格的行跨度設置爲3，並將其餘的默認值設置爲1。我們需要忽略爲後續行添加該單元格。

參見：http://www.w3schools.com/tags/att_td_rowspan.asp

來源

2016-06-21 18:31:06 snyderxc

HTML表格 - 如何讓子表格的列具有與父表格列相同的寬度？

回答

相關問題