css - 如何控制可能跨越多行的表格单元格中的 div 溢出

Question

如果我在一个日程安排页面上工作，一天中的每个小时都有一行，一周中的每一天都有一列。如果发生多个小时，一些单元格可以跨越多行(使用 rowspan)——典型的日历情况。每个 TD 都包含一个 DIV，其中包含我想要控制的事件信息。此外，每列的宽度必须为 12.5%(时间为 col，每天为 7)

简而言之，我希望 div 内容使用单元格中可用的任何空间。如果 td 跨越 4 行，它应该使用所有空间并允许换行以包含尽可能多的文本，但如果 rowspan 仅为 1，则它应该只显示 1 行并且隐藏除此之外的任何内容。

我已经尝试了我在 SE 和其他网站上找到的大部分解决方案，但它们都会干扰一致的列宽或行高。

Answer 1

尝试使用运行代码片段或找到 JSFiddle

.demo {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
.demo td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ID {
  width: 10%;
}
.email {
  width: 20%;
}

<table class="demo">
  <thead>
    <tr>
      <th class="ID">ID</th>
      <th class="email">Email<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>pradyumnaswain76@gmail.com</td>
    </tr>
  </tbody>
</table>