Html CSS表中大小一致的单元格

我正在创建一个包含表格的弹出框网站。在尝试了几个小时使用“表布局”属性和其他属性的不同组合后，该表仍然无法以统一的方式呈现。 CSS如下所示

#popup {
position: absolute;
height: 50%;
width: 50%;
left: 25%;
top: 25%;
background: white;
border: solid black 1px;
text-align: center;

}


table{
  table-layout: fixed; /* Cells are uniformly sized */;
  width: 100%;
  height: 100%;

}

将呈现下表

---

如何确保所有单元格的大小一致？

我相信您最好使用CSS网格进行此类布局

对于学习CSS网格，我推荐后者，后者确实有收费的游戏化教程。这两家公司也有flexbox教程，flexbox Froggy和flexbox Zombies都是免费的

无论如何，这里有一个使用网格的布局的可执行复制：

身体{ 字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体； 显示器：flex； 证明内容：中心； 背景图像：urlhttps://cdn.pixabay.com/photo/2017/09/14/22/42/milky-way-2750627_960_720.jpg ; } .包裹{ 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 背景色：白色； 边框：1px纯黑； 边界半径：5px； 宽度：90%； 填充：0 10px； } .电网{ 自我调整：伸展； 垫底：15px； 显示：网格； 网格模板列：repeat4，1fr； 网格间距：5px； 证明内容：中心； 对齐项目：居中； } .标题，.col-1{ 显示器：flex； 对齐项目：居中； 证明内容：中心； } .标题{ 字号：1.5em； 字体大小：粗体； 填充顶部：10px； } .col-1{ 背景色：D3； 高度：100px； 边框：1px纯黑； } .空白{ 格构柱：2/3跨； } 日期 H103 第1期 第2期 第3期 第4期 H104 第1期 第2期 第3期 第4期 H105 第1期 第2期 第3期 第4期 H107 第1期 第2期 第3期 第4期

---

基本上，如果没有JS或固定高度，就无法实现。表行高度的大小是相互独立的，@Paulie_D我正在使用JS添加每个单元格。我如何用JS解决这个问题？固定表布局只适用于我相信的列…JS解决方案，获取完整表高度，除以行数，将高度应用于行。。。