为啥设置“可见性：隐藏”时表格单元格边框在谷歌浏览器中消失和“边界崩溃：崩溃；”？

关键词：

【中文标题】为啥设置“可见性：隐藏”时表格单元格边框在谷歌浏览器中消失和“边界崩溃：崩溃；”？【英文标题】：Why do table cell borders disappear in Google Chrome when setting "visibility:hidden;" and "border-collapse: collapse;"?为什么设置“可见性：隐藏”时表格单元格边框在谷歌浏览器中消失和“边界崩溃：崩溃；”？ 【发布时间】：2011-09-22 02:39:24 【问题描述】：

我正在尝试使用 CSS 设置 HTML 表格的样式。我需要能够通过 CSS 隐藏单个单元格的内容，因为在打印布局（或任何其他样式表）中，它们的内容必须是可见的。 该表有一个<thead> 和一个<tbody> 部分，沿着每个<tr>、<th> 和<td>，都有一个边框应用于它们，所以不管我隐藏什么，边框（甚至是外部个）将始终显示。

在我的样式表中，我设置了border-collapse: collapse;，并使用visibility:hidden; 隐藏了我想要隐藏的单元格，这在大多数浏览器上都可以正常工作，除了谷歌浏览器（以及 Firefox 中的一些小显示故障，但我认为它们来自宽度的百分比..)。

我还创建了这种行为的示例：

table.example 
  width:100%;
  border-collapse: collapse;


table.example td
  padding: 2px;


table.example .number 
  text-align:right;


table.example .null
  visibility:hidden;


table.example .number.negative
  color:red;


table.example .Date
  text-align:center;


table.example th
  background-color: #dedbde;


table.example, th.example, td.example,.example thead,.example tbody
  border: 1px solid #a5a6a5;


#Demo1 .hideme.Col1,
#Demo1 .hideme.Col2 
  visibility:hidden;
  border: 0;


#Demo1 
  width: 50%;


.Col1 
  width: 4%;


.Col2, .Col3,  .Col4  
  width: 32%;

<table class="example" id="Demo1">
  <thead>
    <tr class=" example">
      <th class="Col1 example"></th><th class="Col2 example">Title1</th><th class="Col3 example">Title2</th><th class="Col4 example">Title3</th>
    </tr>
  </thead><tbody>
  <tr class="r1 example odd first">
    <td class="Col1 example"><img src="image.png"   ></td><td class="Col2 example"><a href="#" class="detaillink">        2865             </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.07.2011</td>
  </tr><tr class="r2 example even">
  <td class="Col1 example"><img src="image.png"   ></td><td class="Col2 example"><a href="#" class="detaillink">        2864             </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.07.2011</td>
  </tr><tr class="r3 example odd">
  <td class="Col1 example hideme"><img src="image.png"   ></td><td class="Col2 example hideme"><a href="#" class="detaillink">        2863             </a></td><td class="Col3 example hideme Date">10.06.2011</td><td class="Col4 example hideme Date">10.08.2011</td>
  </tr><tr class="r4 example even">
  <td class="Col1 example"><img src="image.png"   ></td><td class="Col2 example"><a href="#" class="detaillink">        2863             </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.08.2011</td>
  </tr><tr class="r5 example odd">
  <td class="Col1 example"><img src="image.png"   ></td><td class="Col2 example"><a href="#" class="detaillink">        2299             </a></td><td class="Col3 example Date">10.05.2011</td><td class="Col4 example Date">10.06.2011</td>
  </tr><tr class="r6 example even">
  <td class="Col1 example null"></td><td class="Col2 example null"></td><td class="Col3 example Date null"></td><td class="Col4 example Date null"></td>
  </tr><tr class="r7 example odd">
  <td class="Col1 example"><img src="image.png"   ></td><td class="Col2 example"><a href="#" class="detaillink">        1249             </a></td><td class="Col3 example Date">10.03.2011</td><td class="Col4 example Date">10.04.2011</td>
  </tr><tr class="r8 example even">
  <td class="Col1 example"><img src="image.png"   ></td><td class="Col2 example"><a href="#" class="detaillink">        1248             </a></td><td class="Col3 example Date">10.03.2011</td><td class="Col4 example Date null"></td>
  </tr><tr class="r9 example odd">
  <td class="Col1 example"><img src="image.png"   ></td><td class="Col2 example null"></td><td class="Col3 example Date">10.02.2011</td><td class="Col4 example Date">10.03.2011</td>
  </tr><tr class="r10 example even last">
  <td class="Col1 example"><img src="image.png"   ></td><td class="Col2 example"><a href="#" class="detaillink">         563             </a></td><td class="Col3 example Date">10.02.2011</td><td class="Col4 example Date">20.03.2011</td>
  </tr>
  </tbody>
</table>

如您所见，如果您尝试此代码，它甚至会将所有单元格隐藏到一个小空间的行折叠起来。

这个问题对我当前的项目来说并不是很重要，因为大多数用户都使用 Internet Explorer，但是因为我找不到任何解决方案，而且这个问题将来可能会影响我（我敢肯定其他人已经遇到过这个问题），我真的很想知道为什么会这样。

【问题讨论】：

副手，我认为边框问题是border:0; 样式应用于#Demo1 .hideme.Col1, #Demo1 .hideme.Col2。至于较短的一排，有些东西告诉我它与可见性有关（即使它应该保留不动产，只是不可见）。 另外，这篇其他 SO 帖子可能会有所帮助：***.com/questions/57002/… @Brad 我试图删除border: 0，但它没有改变（至少在 Chrome 中没有）。你对较短的行是正确的，但我似乎找不到解决方法（至少没有什么不是太难看并且适用于所有浏览器）。 @Brad 另一个 SO 帖子帮助我解决了我的另一个问题，谢谢！ 【参考方案1】：

更新 1

如果您的 TD 只显示文字，您可以试试这个

文本缩进：-9999px;

不确定浏览器的兼容性，它应该只影响内联元素。无需移除可见性。

---

在每个单元格中放置一个 div，该 div 将包含您现在在单元格中的元素，然后将 visibility:hidden 设置为仅该 div。

例子

<tr class="r2 example even">
  <td class="Col1 example">
    <div>
      what you want to hide here...
    </div>
  </td>
</tr>

【讨论】：

好的，这个解决方案听起来很简单（我自己应该想到的......）。可悲的是，它会添加很多标记（表格已经变得非常大，超过一个 MB，它们必须显示 很多 数据），而且感觉有点脏......纯粹的CSS 解决方案会很棒！ 从您的代码中，我认为您只在这些单元格内显示文本？如果是这样，你可以把 text-indent:-9999px;对于您不想显示的 TD，但据我所知，这只会影响内联元素。我也不确定浏览器的兼容性。 你说得对，我只显示文本（最多显示一些较小的图标，也是内联的）。好点子！它有效，非常感谢！它甚至会照顾“失踪”<tr>！你是否也有一些想法如何保持外边界无论如何，但如果两个附近的单元格被隐藏，隐藏它们之间的边界？ 你可以添加另一个只指定border-top:1px纯黑色的类；边框底部：1px 纯黑色；右边框：1px 纯黑色；除行中的第一个 TD 之外的所有相邻 TD。那应该做的工作！或者您可以使用边距，但布局肯定会中断； 请注意，如果您只显示文本，您也可以轻松地使用 color:transparent;或颜色：白色； whick 会将 TDs 内的文本显示为透明或白色（如果白色是 TDs 背景的颜色），这样您根本不会注意到它。【参考方案2】：

设置 tr 和 td 的边框似乎可以解决我的问题。

.collateral-tabs .std tr,
.collateral-tabs .std td 
    border: 1px solid #333;

【讨论】：

html表格单元格间距设不了是为啥

参考技术A在html中，可以使用border-spacing属性来设置表格间距。border-spacing属性用于表格的边框在“分离”的状态下，设置相邻单元格的边框间的距离。该属性会在表格边框“分离”时，设置行和单元格的边框在横向和纵向上的间... 查看详情

当我输入单元格时自动获取日期和时间，但在谷歌表格的单独列中

】当我输入单元格时自动获取日期和时间，但在谷歌表格的单独列中【英文标题】：AutomaticallyobtaindateandtimewhenItypeinacellbutinseparatecolumnsatgooglesheets【发布时间】：2021-08-2109:23:34【问题描述】：我是新来的，提前道歉。我的问题是... 查看详情

如何基于一个单元格等于另一个单元格在谷歌表格中应用条件格式

】如何基于一个单元格等于另一个单元格在谷歌表格中应用条件格式【英文标题】：Howtoapplyconditionalformattingingooglesheetsbasedonacellbeingequaltoanothercell【发布时间】：2019-09-1618:12:14【问题描述】：我有一张Google表格，用于跟踪高中越... 查看详情

在谷歌表格中提取特定单元格的公式

】在谷歌表格中提取特定单元格的公式【英文标题】：Formulatoextractspecificcellsingooglesheets【发布时间】：2019-09-1704:40:48【问题描述】：我正在尝试找到一种方法从始终更改的特定单元格范围中提取多个值，唯一可以注意到的标识... 查看详情

引用查询函数中的单元格不包含在谷歌表格的范围内

】引用查询函数中的单元格不包含在谷歌表格的范围内【英文标题】：Referencingacellinqueryfunctionnotincludedinrangeingooglesheets【发布时间】：2020-04-0519:34:42【问题描述】：我正在尝试编写一个查询函数，该函数从不同工作表上的列中选... 查看详情

从一行中的单元格中获取数据并在谷歌表格中填充新行

】从一行中的单元格中获取数据并在谷歌表格中填充新行【英文标题】：Getdatafromcellsinarowandpopulateanewrowingooglesheets【发布时间】：2018-02-1705:58:33【问题描述】：我是个脚本菜鸟。这个想法是从一张纸的行中获取数据，然后每天一... 查看详情

为啥 Firefox 不断删除 1px 到表格单元格的边框？

】为啥Firefox不断删除1px到表格单元格的边框？【英文标题】：WhyFirefoxkeepsremoving1pxtothetablecell\'sborder?为什么Firefox不断删除1px到表格单元格的边框？【发布时间】：2012-09-0722:32:38【问题描述】：Firefox是否有任何理由删除我在CSS文... 查看详情

如何在谷歌电子表格中将多个单元格与一行中的两个可能值进行比较？(代码片段)

...和M的出现次数，然后使用IF和IFS来构建所需的摘要。首先设置一组像这样的单元格：你不必这样做，但它更容易。你马上就会明白为什么。首先，让我们用COUNTIFS来 查看详情

java设置word表格边框

概述本文介绍通过Java程序设置Word表格边框的方法，设置边框时可对整个表格设置，也可对指定单元格设置，同时可对边框进行格式化设置设置，包括边框类型、样式、颜色、线条宽度等等，下面将分三个示例来展示如何设置边... 查看详情

为啥同一网页在谷歌浏览器中另存为 PDF 时字体大小不同？

】为啥同一网页在谷歌浏览器中另存为PDF时字体大小不同？【英文标题】：WhythesamewebpagehavedifferentfontsizewhensaveasPDFinGoogleChrome?为什么同一网页在谷歌浏览器中另存为PDF时字体大小不同？【发布时间】：2020-09-0821:11:33【问题描述】... 查看详情

使用 odfpy 为表格单元格设置边框

】使用odfpy为表格单元格设置边框【英文标题】：Setborderfortablecellwithodfpy【发布时间】：2020-09-1406:38:39【问题描述】：我使用odfpy创建了一个LibreOffice电子表格，并希望某些单元格有边框，但不知道如何做到这一点。我知道我可以... 查看详情

数据表 - 边框样式不适用于空的表格单元格

】数据表-边框样式不适用于空的表格单元格【英文标题】：Datatables-Borderstylenotappliedtotablecellthatisempty【发布时间】：2015-06-2809:50:33【问题描述】：我在使用数据表时遇到了样式问题。我支持的浏览器是IE6到10。无论我在td内容中... 查看详情

在基于 Gecko 的浏览器中消失的 CSS 表格单元格边框

】在基于Gecko的浏览器中消失的CSS表格单元格边框【英文标题】：DisappearingCSStablecellbordersinGecko-basedbrowsers【发布时间】：2010-09-2023:31:21【问题描述】：我有一个非常具体的html表格结构，似乎揭示了Gecko错误。这里是问题的提炼版... 查看详情

为啥在将单元格插入带有静态单元格的表格视图时需要 tableView(_:indentationLevelForRowAt:)

】为啥在将单元格插入带有静态单元格的表格视图时需要tableView(_:indentationLevelForRowAt:)【英文标题】：whyitneedstableView(_:indentationLevelForRowAt:)whenInsertingcellintoatableviewwithstaticcells为什么在将单元格插入带有静态单元格的表格视图时需... 查看详情

为啥`border-collapse：collapse`会导致相邻单元格在未绘制时具有顶部边框

】为啥`border-collapse：collapse`会导致相邻单元格在未绘制时具有顶部边框【英文标题】：Whydoes`border-collapse:collapse`causeadjacentcellstohaveatopborderwhenoneisn\'tdrawn为什么`border-collapse：collapse`会导致相邻单元格在未绘制时具有顶部边框【发... 查看详情

excel打印预览时为啥会有这两道灰色条，怎么消除

参考技术A有横线是因为顶头那个单元格设置了边框线。去掉的方法：选择横线下的所有单元格；点右键，选择“设置单元格格式”；在弹出窗口中点“边框”；在“线条”样式中点“无”；或在“预置”选项下点“无”；或在... 查看详情

带有闪烁边框的表格单元格

...这并没有突出显示。我想知道是否有任何方法可以为边框设置动画，以便它们闪烁或圆形（典型的虚线边框动画）。我尝试使用@keyframes和动画，但失 查看详情

table边框表头单元格空间合并等设置(代码片段)

表格由<table>标签来定义,每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、... 查看详情