表格行中單元格的變量/動態數量 - 始終填充寬度

如何製作具有不同列數的多行的表格（但不總是具有相同的編號....可以動態添加和刪除列），但仍然有行中的單元格取整行的整個寬度？表格行中單元格的變量/動態數量 - 始終填充寬度

當然，我只想使用CSS並避免使用Javascript解決方案。

這裏是我的問題的例子：

table{ 
 
border: solid; 
 
} 
 

 
td{ 
 
background-color: black; 
 
color: white; 
 
} 
 

 
.fullWidth{ 
 
/* width: 100%; doesn't work */ 
 
}

<table> 
 
<tr> 
 
<td> 
 
cell 1 
 
</td> 
 
<td> 
 
cell 2 
 
</td> 
 
<td> 
 
cell 3 
 
</td> 
 
<td> 
 
cell 4 
 
</td> 
 
<td> 
 
Cells are added and removed dynamically 
 
</td> 
 
</tr> 
 
<tr> 
 
<td class='fullWidth'> 
 
this cell should be the full width of the table 
 
</td> 
 
</tr> 
 
</table>

編輯：我試圖保持這個問題簡短而點，所以我省略了大部分的細節。：P

我正在使用表格，因爲我使用的是Bootstrap's responsive tables on a jQuery Datatable，我需要插入一個自定義行來向某些行添加細節。（Bootstrap的響應表已經使用了默認的「子」行功能Datatables，或者我剛剛會用到）

來源

2017-02-20 Skeets O' Reilly

我不認爲你可以，這就是'colspan'屬性的用途。你可以嘗試使用'tr {display：flex; }'但這可能會擾亂你可能期望的錶行爲。它是否必須是一個html表格？這在flexbox中很容易。 –

如果您希望單元格跨越多個列，則需要使用'colspan'屬性。如果行數在列數上會有很大的不同，我建議不要首先使用表格。 – ray

請勿爲此使用表格...檢出flexbox。表格不是非常動態或響應。這就是爲什麼人們不再使用他們的佈局（並且因爲他們應該從來沒有被用於佈局在最糟糕的地方哈哈） – zgood

從評論來看，我所問的僅僅是CSS而已。我將打開一個新問題來解決帶有引導響應表的Javascript解決方案。

所以本頁面的問題的答案是：不，這是不可能的。

編輯：只要您在第一個插入的行上正確設置了colspan，它看起來像bootstrap的響應表格照顧其餘部分。

來源

2017-02-20 19:35:50

表格行中單元格的變量/動態數量 - 始終填充寬度

回答

相關問題