HTML 表格单元格在插槽中拆分，应该占据整个单元格高度答案

【问题标题】：HTML table cell splitted in slots that should take the full cell heightHTML 表格单元格在插槽中拆分，应该占据整个单元格高度
【发布时间】：2017-08-03 23:28:54
【问题描述】：

我使用表格的方式是将每个单元格拆分到一个或多个插槽中，如下面的 JS Bin 所示。

table demo

我想得到的是每个单元格都被现有的插槽完全填满，例如 - 红色槽应填满单元格高度的 100% - 棕色和紫色槽中的每一个都应填充单元格高度的 50% 如果插槽被删除或添加，单元格填充应该自动适应，例如如果黄色插槽被移除，每个剩余的蓝色 e 橙色插槽应填充单元格高度的 50% 我在网上挖掘了很多，但我没有找到任何可行的解决方案。有什么建议吗？谢谢

【问题讨论】：

标签： jquery css html-table cell

【解决方案1】：

您可以通过 css 为单元格添加默认高度并包括全高、半高和三高等类来完成此操作

td,
.full-cell {
  padding: 0 !important;
  height: 70px;
}

.half-cell{
      height: 35px;
}

.triple-cell{
      height: 23.333333333333333px;
}

这里有一个解决方法 http://live.datatables.net/pejeseho/7/

【讨论】：

谢谢，我一直在寻找 CSS 解决方案，在删除或添加某些插槽的情况下，无需使用 JS 将不同的类应用于单元格。