个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试使用 <col> 隐藏表格中的列和 visibility:collapse如此处所述: Is it possible to hide / show table columns by changing the CSS class on the col element only?
现在我发现这个解决方案似乎只适用于“普通”表，但不适用于 border-collapse:collapse .在这种情况下，只有该列的内容被隐藏，后续列的内容向左移动。
看这里: http://jsfiddle.net/seeLcc2p/3/
body {
padding: 5px;
}
table {
border: 1px solid black;
border-collapse: collapse;
/* border-collapse:separate; */
}
.hide {
visibility: collapse;
}<head>
<style>
/* css code */
</style>
</head>
<body>
<table border="1">
<col width="100" />
<col width="50" class="hide" />
<col width="100" />
<col width="100" />
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>Row 1 Col 4</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>Row 2 Col 4</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>Row 3 Col 4</td>
</tr>
</table>
</body>当有 border-collapse:separate;一切都是异常(exception)，border-collapse:collapse;布局坏了……
关于如何解决这个问题或我做错了什么有什么想法吗？
在 Firefox 57.0.4 中试过。
最佳答案
不要使用 visibility:collapse，尝试 visibility:hidden 它应该可以解决问题
关于html - 表 : "visibility:collapse" does not work with "border-collapse"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48492867/
26
4
0
我有这个左侧站点菜单: Typography Name 1
我有两个问题: 是否有合理的解释，为什么会这样？ 是否有针对这种情况的 CSS 解决方法？ 谢谢! table { border-collapse: collapse; pad
我想知道为什么我的类“panel-collapse”“collapse”不起作用。 我刚刚将文件上传到我的服务器上，当我单击链接区域时，它们不起作用(它们不会放下隐藏内容)。但是，它们在我的 Drea
在这种情况下，我完全感到困惑。当我使用 border-collapse: collapse; 从 1px (#1) 到 大 值 (#2) 并回到 1px (#3)，我有视觉缺陷。 #1 和#3 相同，
我有两个表，想要使用 Javascript 同步它们的列宽。只要我不为表格设置 CSS 属性 border-collapse:collapse;，它就能在 Google Chrome 中按预期工作。
我正在前端使用 Bootstrap 编写一个个人提要阅读器，并想添加一个“折叠/全部展开”按钮。 这是我的第一个 JavaScript/JQuery 代码，所以除了在 Firefox Develope
我正在使用以下模块:https://roszpun.github.io/vue-collapse/#/ 我似乎无法弄清楚如何正确地将类添加到包装元素，因为我首先考虑在 onStatusChange 上
在我的代码中，您将看到一个按钮和一个可折叠元素。如果单击该按钮，页面将滚动到可折叠状态。 用户点击按钮后是否可以打开折叠？我考虑过使用视口(viewport)，但每次在视口(viewport)中时，折
我有一个 Collapsible-set(有 5-10 个可折叠)并使用此代码查找已打开的: $("#mySet").on("collapsibleexpand", function (e) {
我正在使用 jQuery Collapse在通过 Ajax 插入的元素上。 当我应用下面的行时，它删除了 collapse 类。我需要保留该类，以便在需要关闭 Ajax 内容时调用 collapse(
我正在尝试使用 隐藏表格中的列和 visibility:collapse如此处所述: Is it possible to hide / show table columns by changing
我在格式化 nav navbar-nav 无序列表中的列表项时遇到问题。当页面为全尺寸时，我想保留格式不变。但是，我想在页面缩小时格式化/自定义列表项，并且列表项“消失”并且仅在用户单击切换按钮后“重
出于某种原因，即使我第一次执行完全相同的操作，我也无法再次触发显示。 基本上，我有一个表单，用户可以从下拉列表中选择前两个字段(商家提供商和银行)或添加新条目。因此，我在 Javascript 中使用
我使用了 jsfiddle 68RXP 中的示例collapse-group 创建一个可扩展的 div: HTML: Heading Lorem ipsum View
我有以下问题:当我翻译表格中的标题单元格并且表格设置为 border-collapse:collapse 时，单元格将移动但不会移动它们的边框。我创建了一个测试: 标记:
我是 CSS 和 Bootstrap 3.0 的新手。下面是我可以在很多地方找到的代码，现在我可以毫无问题地编写它。但我真的不知道幕后情况如何。 Company
我有一个包含多行的表格，例如: Line1 Line2 Line3 现在，在 javascript(基于单选输入字段)中，我想通过添加 visibility:collapse 来
我有一个网页，我在其中尝试使所有浏览器的边框正确。参见 http://dl.dropbox.com/u/17256431/SpreadsheetConverter/border-3/border-3.
我正在尝试使用 javascript 来创建 Bootstrap 我只需要更新 javascript 文件，而不是在网站的各个页面上管理导航栏。 这是横幅的代码: document.write( "
给定以下 HTML 页面，表格顶部出现一条水平线，其中第一行将包含第二和第三个单元格(如果已定义)。 Test Page table { margin:10px 0 10px 0;
我是一名优秀的程序员,十分优秀！