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

【问题标题】：How to control overflow of a div within a table cell that may span multiple rows如何控制可能跨越多行的表格单元格中的 div 溢出
【发布时间】：2015-01-12 03:27:50
【问题描述】：

如果我正在处理一个日程安排页面，该页面在一天中的每个小时都有一行，在一周中的每一天都有一个列。某些单元格可以跨越多行（使用rowspan），如果这种情况持续数小时 - 典型的日历情况。每个TD 都包含一个DIV，其中包含我想要控制的事件信息。此外，每列的宽度必须为 12.5%（时间一个列，每天 7 个列）

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

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

【问题讨论】：

标签： css html-table

【解决方案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>

【讨论】：

【解决方案2】：

我认为这里最好的方法是设置您不想调整大小的 <div> 的样式，因为行的高度是根据内容大小确定的 (http://www.w3.org/TR/CSS21/tables.html#height-layout)。

试试这个：http://jsfiddle.net/vz3muoq8/2/

HTML

<table>
    <tr><td>aaa</td><td rowspan="3">aaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
    <tr><td>aaa</td></tr>
    <tr><td>aaa</td></tr>

    <tr><td>aaa</td><td>aaa</td></tr>
    <tr><td>aaa</td><td><div>aaaaaaaaaaaaaaaaaaaaaaaaa</div></td></tr>
    <tr><td>aaa</td><td>aaa</td></tr>

</table>

CSS

table {
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
    overflow: hidden;

}

th, td {
    border: 1px solid black;
    width: 50px;
    word-wrap: break-word;
    height:15px;
    text-wrap: ellipsis;
}

div {
    height: 15px;
    overflow: hidden;
    background-color: yellow;
}

【讨论】：

运气不好...*每个* TD 都包含一个 div，这似乎是我的问题所在。