該
對于較大的表,這種不受歡迎的行為更加嚴重。

我只是希望能夠切換表格列的可見性,并讓它在 Chrome、Edge 和 Firefox 上看起來相同,這導致了我的問題:有什么好的解決方法可以處理“可見性:折疊”錯誤火狐瀏覽器?
代碼:
這是小提琴:
https://jsfiddle.net/jado66/pgyLm86e/18/
這是小提琴中的代碼:
<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>
uj5u.com熱心網友回復:
如果我們在 Developer tools 中觀察,我們會看到 colgroup 溢位。因此,如果我們剪輯桌子上的溢位,它會剪輯一些額外的部分。如果我們稍微增加折疊列的寬度,它會完美地剪輯:
Show code snippet
var c4, c5;
function toggle() {
c4.classList.toggle('collapsed');
c5.classList.toggle('collapsed');
}
function init() {
c4 = document.querySelector('#col_4');
c5 = c4.nextElementSibling;
}
:root {
--col-width: 55px;
}
th {
border-bottom: 1px solid grey;
}
td {
text-align: center;
}
col {
border: 1px solid grey;
width: var(--col-width);
}
/* clip the overflow */
table {
overflow: clip;
}
.collapsed {
visibility: collapse;
/* need to increase width slightly to make it work */
/* some how addition doesn't work */
width: calc(var(--col-width) * 1.2);
}
<html lang="en">
<body onload="init()">
<p>View this in Firefox browser</p>
<div style="text-align: center;">
<table style="margin: 0 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" class="collapsed">
<col id="col_5" class="collapsed">
<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 style="width: min-content; background-color: wheat; margin: 0 auto;;">mid</div>
<button onclick="toggle()">Toggle collapse</button>
</body>
</html>
但這并沒有使內容居中。折疊
col仍然有助于寬度。如果我們添加一個 div 包裝器并設定它的寬度(表格寬度 - 折疊寬度),那么它可能會起作用:
Show code snippet
var c4, c5;
function toggle() {
c4.style.visibility = c5.style.visibility = window.getComputedStyle(c4).visibility === 'collapse' ? '' : 'collapse';
}
function init() {
c4 = document.querySelector('#col_4');
c5 = c4.nextElementSibling;
resize();
//observe style change
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
resize();
});
});
observer.observe(c4, {
attributes: true,
attributeFilter: ['style']
});
}
//subtract collapsed width from wrapper
function resize() {
var colgroup = document.querySelector('colgroup');
var actualWidth = colgroup.offsetWidth;
var reducedWidth = 0;
for (var i = 0, len = colgroup.childElementCount; i < len; i) {
var col = colgroup.children[i];
if (window.getComputedStyle(col).visibility == 'collapse') {
reducedWidth = col.offsetWidth;
}
}
console.log(actualWidth ' reduced by ' reducedWidth);
var wrapper = document.querySelector('#wrapper');
wrapper.style.width = (actualWidth - reducedWidth) 'px';
}
th {
border-bottom: 1px solid grey;
}
td {
text-align: center;
}
col {
border-right: 1px solid grey;
width: 55px;
}
/* added styles */
col:last-child {
border-right: none;
}
table {
width: max-content;
overflow-y: hidden;
}
#wrapper {
border: 1px solid;
width: max-content;
overflow: hidden;
margin: 0 auto;
}
<html lang="en">
<body onload="init()">
<p>View this in Firefox browser.</p>
<div id=wrapper style="text-align: center;">
<table style="margin: auto; 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.4444444</td>
<td>1</td>
<td>1.6</td>
</tr>
</table>
</div>
<div style="width: min-content; background-color: wheat; margin: 0 auto;;">mid</div>
<button onclick="toggle()">Toggle collapse</button>
</body>
</html>
有了這個,我們使用包裝器 div 隱藏折疊的部分。
如果你想水平滾動表格,那么你需要為滾動添加一個更多的包裝器:
Show code snippet
<html lang="en">
<head>
<meta charset="utf-8">
<script>
var c4, c5;
function toggle() {
c4.style.visibility = c5.style.visibility = window.getComputedStyle(c4).visibility === 'collapse' ? '' : 'collapse';
}
function init() {
c4 = document.querySelector('#col_4');
c5 = c4.nextElementSibling;
resize();
//observe style change
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutationRecord) {
resize();
});
});
observer.observe(c4, {
attributes: true,
attributeFilter: ['style']
});
}
//subtract collapsed width from wrapper
function resize() {
var colgroup = document.querySelector('colgroup');
var actualWidth = colgroup.offsetWidth;
var reducedWidth = 0;
for (var i = 0, len = colgroup.childElementCount; i < len; i) {
var col = colgroup.children[i];
if (window.getComputedStyle(col).visibility == 'collapse') {
reducedWidth = col.offsetWidth;
}
}
console.log(actualWidth ' reduced by ' reducedWidth);
var wrapper = document.querySelector('#wrapper');
wrapper.style.width = (actualWidth - reducedWidth) 'px';
}
</script>
<style>
th {
border-bottom: 1px solid grey;
}
td {
text-align: center;
}
col {
border-right: 1px solid grey;
width: 55px;
}
/* added styles */
col:last-child {
border-right: none;
}
table {
width: max-content;
overflow-y: hidden;
}
#wrapper {
border: 1px solid;
width: fit-content;
overflow: hidden;
margin: 0 auto;
}
#scrollMe {
width: 300px;
overflow-x: auto;
margin: 0 auto;
border: 1px solid lime
}
</style>
</style>
</head>
<body onload="init()">
<p>View this in Firefox browser.</p>
<div id="scrollMe">
<div id=wrapper style="text-align: center;">
<table style="margin: auto; 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.4444444</td>
<td>1</td>
<td>1.6</td>
</tr>
</table>
</div>
</div>
<div style="width: min-content; background-color: wheat; margin: 0 auto;;">mid</div>
<button onclick="toggle()">Toggle collapse</button>
</body>
</html>
注意:這些只是解決方法。
uj5u.com熱心網友回復:
正如@Richard Deeming指出的那樣,此渲染問題與該border-collapse: collapse;屬性有關。
如果你可以不用它并且居中也是可以忽略的——border-collapse: collapse;從你的桌子上移除這個屬性可能是一個有效的妥協。
Show code snippet
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>
另一種方法可能是根據列對每個 th/td 應用“collapsed-col”類。
此方法需要您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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/373626.html
