在前端开发中，有时你可能需要在表格中显示/隐藏某些列。本文将介绍如何使用 CSS 实现这一功能。
HTML 表格结构
首先，让我们来看一下 HTML 表格的基本结构：
-- -------------------- ---- -------
-------
-------
----
---------- ------
---------- ------
---------- ------
---------- ------
-----
--------
-------
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
---- ---- ------- ---
--------
--------使用 CSS 显示/隐藏列
要显示或隐藏表格列，我们可以使用 display 属性。以下是一个简单的 CSS 示例，它将第三列设置为不可见：
table tr td:nth-child(3),
table tr th:nth-child(3) {
display: none;
}该代码选择了每个表格行 (tr) 中的第三个单元格 (td) 和表头 (th) 中的第三个单元格，并将它们的 display 属性设置为 none。这会使该列不可见。
为了显示被隐藏的列，我们可以使用类似的 CSS 代码：
table tr td:nth-child(3),
table tr th:nth-child(3) {
display: table-cell;
}现在，当你点击一个按钮或链接时，可以在 JavaScript 中切换 CSS 类来显示/隐藏所需的列。以下是一个示例 HTML、CSS 和 JavaScript 代码：
-- -------------------- ---- -------
-------
-------
----
---------- ------
---------- ------
---------- ------
---------- ------
-----
--------
-------
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
---- ---- ------- ---
--------
--------
------- ------------------------------- ------ ----------
-------
-- ---- --- ----- ------ -- ------- --
----- -- ----------------
----- -- --------------- -
-------- -----
-
-- ---- --- ----- ------ ---- ------- -- --
----------------- -- ----------------
----------------- -- --------------- -
-------- -----------
-
--------
--------
-------- -------------- -
--- ----- - --------------------------------
-- ----------------------------------------- -
--------------------------------------
- ---- -
-----------------------------------
-
-
---------在这个示例中，我们默认隐藏了第三列 (display: none)。当用户点击按钮时，会调用 toggleColumn() 函数，该函数会在 <table> 元素上切换一个名为 show-column 的 CSS 类。此类定义了如何显示第三列 (display: table-cell)。
总结
使用 CSS 显示/隐藏表格列是一个非常有用的技术，它可以让你更好地控制表格的外观和行
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27712