跨行溢出，一行折叠
Posted
技术标签:
【中文标题】跨行溢出，一行折叠【英文标题】：Overflow in spanned row with one row collapsed 【发布时间】：2020-06-03 10:06:52 【问题描述】：我想让溢出的行在跨越的行内工作，另一个被折叠。
现在文本已被剪裁，但当行未折叠时 - 溢出有效。
我试过position: absolute，它可以工作......直到你开始滚动。如果我开始将position: relative 放在任何地方，文本就会再次被剪裁。
我搜索了任何提示，但我发现这显然是 Webkit 实现它的方式：https://github.com/w3c/csswg-drafts/issues/478#issuecomment-318539983 在 Firefox 上没有问题，只有在 Webkit 浏览器上。
table
border-collapse: collapse;
border: 1px solid black;
tr
height: 20px;
positon: relative;
td
max-width: 100px;
height: 20px;
vertical-align: top;
white-space: nowrap;
border: 1px solid black;
.collapsed
visibility: collapse;
div
height: 300px;
overflow: scroll;
/* span
position: absolute;
*/<div>
<table>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2"><span>Very long sentence</span></td>
</tr>
<tr class="row2 collapsed"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
<tr>
<td>1</td>
<td rowspan="2">Very long sentence</td>
</tr>
<tr class="row2"><td>2</td></tr>
</tbody>
</table>
</div>【问题讨论】：
【参考方案1】：$(document).ready(function()
$("#change").click(function()
$(".row2").toggleClass("collapsed");
// $(".spannedtd").removeAttr("rowspan");
$('.spannedtd').attr('rowspan', function(index, attr)
return attr == '2' ? null : '2';
);
);
);table
border-collapse: collapse;
border: 1px solid black;
/* tr
height: 20px;
position: relative;
*/
td
max-width: 100px;
/* height: 20px; */
vertical-align: top;
white-space: nowrap;
border: 1px solid black;
.collapsed
visibility: collapse;
div
height: 300px;
overflow: scroll;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="change" class="btn btn-primary">Change Visibility</button>
<br/>
<br/>
<div>
<table>
<tbody>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>
</tr>
<tr class="row2">
<td>2</td>
</tr>
</tbody>
</table>
</div>以上代码Codepen Link
我已删除按钮单击时的行跨度。
注意：在应用visibility:collapse
后，点击滚动窗口上方的更改按钮可查看表格的更改【讨论】：
这并不能解决任何问题，因为您更改了列的宽度。问题在于overflow 表示内容不适合表格单元格。
那么你想在隐藏的表格单元格中看到溢出的内容吗？
是的，我想实现 Firefox 的结果，当文本没有被剪切并且我可以使用溢出 + 我可以滚动整个表格。
问题是，当您的行跨度包含折叠的行时，它会禁用整行的overflow。并且它包括行中未折叠的部分。
我已经用更新的代码和更新的 codepen 链接更新了我的答案。在更新的代码中，我删除了行跨度，它工作正常。检查输出并告诉我它是否需要修改或者它已经解决了您的问题。以上是关于跨行溢出，一行折叠的主要内容，如果未能解决你的问题，请参考以下文章