【问题标题】:How to properly show/hide the right border of Table's TD如何正确显示/隐藏表格 TD 的右边框
【发布时间】:2021-06-05 08:40:47
【问题描述】:

我想灵活地隐藏/显示表格内某些 TD 的右边框,但 TD 的边框颜色可能不同,例如红色、黑色或蓝色,所以我不能只做下面这样的事情:

td.style.borderRightColor = shouldShow ? 'black' : 'white';

因为 td 边框可以是任何颜色和任何背景,例如

 <td style="border:1px solid rgb(xx, yy, zz);width:100px"></td>

相反,我想知道是否有办法使 TD 的边框透明。就像,将边框的 RGBA 的 A 设置为 0,但为了做到这一点,我首先需要知道边框的当前 RGB?或者,有没有其他方法可以做到这一点?

【问题讨论】:

  • 您需要为上下文提供更多代码,您如何定义希望能够显示/隐藏的边框?
  • 我添加了更多信息,基本上是边框宽度/颜色和背景未知。所以我认为代码应该让它透明而不改变原始颜色/背景颜色
  • 设置border-right {none},颜色无关
  • @charlietfl 然后当shouldShow 为真时,他的旧配置来自哪里?

标签: javascript html html-table


【解决方案1】:

您可以使用border-width。或者在你的情况下,border-right-width:

const borderWidth = '1px'; // this will depend on what width you're using already.
const noBorderWidth = '0';
td.style.borderRightWidth = shouldShow ? borderWidth : noBorderWidth ;

border-style (border-right-style):

const borderStyle = 'solid'; // this will depend on what border-style you're using already.
const noBorderStyle = 'none';
td.style.borderRightStyle = shouldShow ? borderStyle : noBorderStyle;

【讨论】:

  • 谢谢卡勒姆。我在这里尝试了您的方法:jsfiddle.net/flyingbee2012/udpeq0w9/101 但似乎边框仍然可见,不确定我是否以正确的方式进行操作。
  • 我正在考虑使用类似的东西: style = window.getComputedStyle(document.getElementById("Example"), null) 然后从 stylegetPropertyValue('border-right-color') 获取 rgb,然后对其应用第四个值(不透明度)。
  • @flyingbee 啊对,你的问题是相邻的单元格都有边框,所以隐藏一个单元格的右边框不会影响下一个单元格的左边框,所以你仍然看到一。 see here
  • 知道了,好像是"border-collapse:collapse;"这导致了这个问题,如果我删除这个设置,要么 col.style.borderRightStyle = 'none';或 col.style.borderRightWidth = '0';会工作。谢谢!
猜你喜欢
  • 2012-08-27
  • 1970-01-01
  • 1970-01-01
  • 2023-03-26
  • 1970-01-01
  • 2015-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-24
相关资源
最近更新 更多