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

Question

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

简而言之，我希望div 内容使用单元格 中可用的任何space。如果 td 跨越 4 行，它应该使用所有 space 并允许换行以包含尽可能多的文本，但如果 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>

Answer 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;
}

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

How to control overflow of a div within a table cell that may span multiple rows

css

html-table

HTML

CSS