隐藏的表 TD(行跨度)内容，TR 可见性设置为 "collapse"

我构建了一个HTML表，其中中间行使用CSS隐藏visibility:collapse

默认情况下，只有表的第一行和最后一行可见。

在此表中，右侧有一列是使用行跨度设置的。此列可以包含多行文本。

我的问题是，如果此列的高度大于默认显示的表格行(第一个和最后一个)的总高度，则放在此列中的整个内容似乎会被截断。

.hide {
visibility: collapse
}
body {
padding: 2rem;
}

<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>

我应该在 CSS 中更改什么才能显示行跨单元格的所有"文本"行而不是被截断？不能使用 JavaScript。

我认为最好使用display:none;或visibility:hidden;。或者在TD上使用overflow:auto;，但随后你会得到一个滚动条jsfiddle

关于visibility:collapse;从css-tricks查看这篇文章

.hide{
/* Using this, will mess up everything */
/* visibility:collapse; */

/* Using this, will give you something where the middle row is hidden */
/* visibility:hidden; */

/* display none works the best */
display: none;
}

<table border="1">
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</tbody>
</table>

深入研究这个问题后，很明显，示例中的问题描述和<td rowspan="3">的构造方式使每个人都偏离了轨道。包括我...

经过几个小时的令人沮丧，答案实际上很简单：由于 5<br>秒，OP 试图将 6 行文本强制到 3 行空间中。只是没有足够的空间容纳内容，因此单元格溢出。行跨度不应该读3，而是6！

一旦发现房间问题，一种解决方案是创建更多表格行以适应 6 行，并安排使用滚动条，同时在表格中可用行少于 6 行时剪裁溢出单元格。

在页表上：表元素：在小空间中显示大表 MDN 将表定义为table { display: block; overflow: auto }，并引入了tbody { white-space: nowrap }以启用表内容的滚动。

我创建了一些注释代码，显示了原始代码和解决方案 1，其中包含类.hide和其他行的简单切换。

我喜欢吗？不，远非如此，但这就是表机制的工作方式。我不认为这是一个错误，只是我们需要解决的问题......

更新

在下面回答@MaxiGui公平的观点时，我不尊重 OP">我应该在 CSS 中更改什么才能显示行跨单元格的所有"文本"行而不是被截断">问题，我添加了另一个解决方案。

添加的解决方案 2显示了 OP 原始代码，但只是在display: none/table-row之间切换类.hide而不是visibility: collapse/visible。

因为如果元素的所有大小属性都必须设置为0(零，无效)以模仿display: none，那么使用display属性而不是visibility隐藏表行要简单得多。

仅供参考，OP 没有明确提到保留visibility的要求......

/* original code */
body    { padding: 2rem }
.hide   { visibility: collapse }
/* solution 1 */
.solution {
display: inline-block;
overflow: auto; /* to show scrollbars when required */
}
/*
MDN excerpt
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces)
When looking at these styles you'll notice that table's display property
has been set to block. While this allows scrolling, the table loses some
of its integrity, and table cells try to become as small as possible.
To mitigate this issue white-space has been set to nowrap on the <tbody>.
*/
.solution tbody { white-space: nowrap }
.solution td {
overflow: hidden;    /* clips excess content */
vertical-align: top; /* moves content to top of cell */
}
#tgl-line ~ .solution {
min-width: calc(6.75rem + 17px); /* create some room for content and scrollbar */
/* just for demo, change to max-width when .solution { display: block } */
}
#tgl-line:checked ~ table .hide     { visibility: visible } /* both tables */
#tgl-line:checked ~ .solution       { min-width: 6.75rem  } /* solution only */
#tgl-rows         ~ .solution .rows { display: none }       /* additional rows hidden */
#tgl-rows:checked ~ .solution .rows { display: table-row }  /* in view... */
/* solution 2 */
.hide-d                             { display: none } /* alt classname for solution 2 */
#tgl-line:checked ~ table .hide-d   { display: table-row }
/* eye-candy */
h2 { margin-top: 4rem }

<input id ="tgl-line" type="checkbox">
<label for="tgl-line">toggle .hide (all examples)</label>
<h2>original: toggle 'visibility' (rowspan=3)</h2>
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
<h2>solution 1: toggle 'visibility' (rowspan=6)</h2>
<input id ="tgl-rows" type="checkbox">
<label for="tgl-rows">toggle rows</label>
<br><br>
<table class="solution" border="1">
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="6" class="special">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
<tr class="rows">
<td>D1</td>
<td>D2</td>
</tr>
<tr class="rows">
<td>E1</td>
<td>E2</td>
</tr>
<tr class="rows">
<td>F1</td>
<td>F2</td>
</tr>
</tbody>
</table>
<h2>solution 2: toggle 'display' (rowspan=3)</h2>
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide-d">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>

.hide {
position: absolute;
left: -999em;
}
body {
padding: 2rem;
}

<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>

display: none;元素从正常流中删除并隐藏;它占用的空间被折叠了。屏幕阅读器会忽略内容。因此，如果您想隐藏它但使其对屏幕阅读器可见，我认为您可以使用上面的代码。

<小时 />

如果您确实需要，您可以随时将line-height: 0;添加到.hide中，如下所示：

.hide {
visibility: collapse;
line-height: 0; 
}

这里给出了这个解决方案： CSS："可见性：崩溃"仍然占用空间

我仍然建议在td上应用visibility:collapse，因为它会为rowspan单元格留出更多空间，因为您可以看到 2 个表之间的差异。

我仍然更喜欢使用display:none;但这取决于您要做什么。

演示

#hide .hide {
visibility: collapse;
line-height: 0; 
}
body {
padding: 2rem;
}
/* SECOND table - collapse on td */
#td-hide .hide > td{
visibility: collapse;
line-height: 0;
height:0;
border: 0;
padding:0;
margin:0;
}
.container{
display:flex;
}
.container > div{
margin:0 auto;
}

<div class="container">
<div>
<h3>visibility: collapse on tr</h3>
<table id="hide" border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
</div>
<!-- Second table with collapse on td -->
<div>
<h3>visibility: collapse on td</h3>
<table id="td-hide" border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
</div>
</div>

您可以使用position: absolute和top: -1000000px通过使用此代码，可以实现所需的输出。

.hide {
position: absolute;
top: -100000px;
}
body {
padding: 2rem;
}

<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6<br>Text 7<br>Text 8<br>Text 9</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>

我希望这将解决您的问题。

您好，如果您需要正确显示您的内容，您应该添加一个类并使该类宽度：自动; 溢出：自动; 高度：自动;我建议你应用这个 ->

.hide {
visibility: collapse
}
body {
padding: 2rem;
}
.meta {
width: auto;
overflow: auto;
height: auto;
}

<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td class="meta" rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>

但这取决于你想做什么。

您可以滚动表数据，请看以下代码：

.hide {
visibility: collapse
}
body {
padding: 2rem;
}
.table-data {
overflow-y: auto;
}
.table-data::-webkit-scrollbar {
display: none;
}

<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="3" class="table-data">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
</tr>
<tr class="hide">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>

演示

相关内容

最新更新

热门标签：