有哪些好的解决方法可以解决 Mozilla Firefox 中的“Visiblility: Collapse”错误？
上下文:
我的评论中的 friend 告诉我，有一个旧的 Firefox 错误会导致“可见性:折叠” CSS 属性的行为类似于 “可见性:隐藏” CSS 属性。这会导致表格为完整尺寸，所有可见列均向左移动，额外空间向右移动。
对于更大的表，这种不良行为更加严重。
我只是希望能够切换表格列的可见性，并使其在 Chrome、Edge 和 Firefox 上看起来相同，这引出了我的问题:有哪些好的解决方法可以处理“可见性:折叠” “Mozilla Firefox 中的错误？
代码:
这是 fiddle :
https://jsfiddle.net/jado66/pgyLm86e/18/
这是 fiddle 中的代码:
<html lang="en">
<head>
<meta charset="utf-8">
<style>
th{
border-bottom: 1px solid grey;
}
td{
text-align: center;
}
col{
border: 1px solid grey;
width: 55px;
}
</style>
</head>
<body>
<div style="text-align: center;">
<table style="margin: auto; border: 1px solid black; border-spacing: 0; border-collapse: collapse;">
<colgroup>
<col id = "col_1">
<col id = "col_2">
<col id = "col_3">
<col id = "col_4" style="visibility: collapse">
<col id = "col_5" style="visibility: collapse">
<col id = "col_6">
</colgroup>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
<td>1.6</td>
</tr>
</table>
</div>
</div>
</body>
</html>
最佳答案
正如@Richard Deeming所指出的，这个渲染问题与border-collapse:collapse;属性有关。
如果你可以不用它并且居中也可以忽略不计 -
从表中删除 border-collapse:collapse; 属性可能是一个有效的妥协方案。
function hideColumn(columns) {
columns.forEach(function(num, i) {
columns[i] = "#col_" + columns[i];
});
let selectors = columns.join(", ");
// reset previously hidden
let hidden = document.querySelectorAll(".collapsed-col");
hidden.forEach(function(el) {
el.classList.remove("collapsed-col");
});
// hide cells by class
let cells = document.querySelectorAll(selectors);
cells.forEach(function(item, i) {
item.classList.add("collapsed-col");
});
}
// test input
let inputHideColumns = document.querySelector(".inputHideColumns");
inputHideColumns.addEventListener("change", function(e) {
let value = e.target.value.replaceAll(", ", ",");
let columns = value.split(",");
hideColumn(columns);
});.collapsed-col {
visibility: collapse;
}
table {
border-spacing: 0;
/*
border-collapse: collapse;
margin: auto;
*/
border: 1px solid black;
table-layout: fixed;
}
th {
border-bottom: 1px solid grey;
}
td {
text-align: center;
}<body>
<div style="text-align: center;">
<table>
<colgroup>
<col id="col_1">
<col id="col_2">
<col id="col_3">
<col id="col_4" class="collapsed-col">
<col id="col_5" class="collapsed-col">
<col id="col_6">
</colgroup>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
<td>1.6</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
<td>2.6</td>
</tr>
</table>
</div>
<p>
<label>hide columns (comma seperated)</label>
<input class="input inputHideColumns" type="text" placeholder="hide columns (comma seperated)" value="5,4">
</p>
</div>另一种方法可能是根据列将“collapsed-col”类应用于每个 th/td。
此方法需要您的 th 和 td 元素具有专用的列类，例如 col_1、col_2等等
function indexColumns(table) {
let rows = table.querySelectorAll("tr");
rows.forEach(function (row, r) {
let cols = row.querySelectorAll("th, td");
cols.forEach(function (col, c) {
col.classList.add("tr_" + r);
col.classList.add("col_" + (c + 1));
});
});
}
function hideColumn(columns) {
columns.forEach(function (num, i) {
columns[i] = ".col_" + columns[i];
});
let selectors = columns.join(", ");
// reset previously hidden
let hidden = document.querySelectorAll(".collapsed-col");
hidden.forEach(function (el) {
el.classList.remove("collapsed-col");
});
// hide cells by class
let cells = document.querySelectorAll(selectors);
cells.forEach(function (item, i) {
item.classList.add("collapsed-col");
});
}
// index th/td elements by setting class
let table = document.querySelector('table');
indexColumns(table);
hideColumn([4, 5]);
// test input
let inputHideColumns = document.querySelector(".inputHideColumns");
inputHideColumns.addEventListener("change", function (e) {
let value = e.target.value.replaceAll(", ", ",");
let columns = value.split(",");
hideColumn(columns);
});.layout {
width: 50%;
margin: 0 auto;
}
table {
border-spacing: 0;
border-collapse: collapse;
margin: auto;
border: 1px solid black;
}
th {
border-bottom: 1px solid grey;
}
td {
text-align: center;
}
.collapsed-col {
display: none;
}<body>
<div class="layout">
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
<td>1.6</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
<td>2.6</td>
</tr>
</tbody>
</table>
</div>
<p>
<label>hide columns (comma seperated)</label>
<input class="input inputHideColumns" type="text" placeholder="hide columns (comma seperated)" value="5,4">
</p>
</div>关于html - 有哪些好的解决方法可以解决 Mozilla Firefox 中的 "Visiblility: Collapse"错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70173237/