当前位置: 首页 > 面试题库 >

CSS中具有边框折叠的表格边框颜色

邵胜涝
2023-03-14
问题内容

我想在表格中某个字段的上方放置一条线,以表明它是上述值的总和。但是,该表默认情况下已经带有边框。

这是一个示例:我有一张折叠了边框的桌子。我将边框底部设置在一个字段上,将边框顶部设置在其下方的字段上。这两个都指定相同的边框。使用最上面的CSS。有没有一种方法可以使用最底层的?

<html>
    <head>
        <style type="text/css">
            table { border-collapse: collapse; }
            td.first { border-bottom: solid red 1px; }
            td.second { border-top: solid gold 1px; }
        </style>

    <body>
        <table>
            <tr><td class="first">Hello</td></tr>
            <tr><td class="second">World</td></tr>
        </table>
    </body>
</html>

这显示了两个单元格之间有一条红线。有办法获得金线吗?


问题答案:

这是的已定义行为border-collapse。《 O’Reilly CSS权威指南第3版》的第357页说:

如果折叠的边框具有相同的样式和宽度,但颜色不同,则从最佳到最不优选:单元格,行,行组,列,列组,表。

如果…来自相同类型的元素,例如两行…,则颜色取自最顶部和最左侧的边框。

因此,最上面的红色获胜。

一种替代此方法的方法可能是使用单元格作为颜色,以赢得行的颜色。

优先级高于此“相同颜色规则是”的规则

较宽的边界胜过较窄的边界

在那之后,

双赢,然后是虚线,虚线,山脊,起点,凹槽,插图

您可以使用2px来赢得金牌,我尝试在Chrome中使用1pxbut double,但它显示为1px solid并且也将赢得红色。尽管如果您想使用此方法,那么最好使用此技术确保您支持的浏览器的行为相同。



 类似资料:
  • 我想创建一个透明的圆形按钮,点击它应该有条带边框。我想用HTML、CSS或者必要的java脚本来实现这一点。 以下是一个示例:https://jsfiddle.net/chrichrichri/a9dpg582/38/ 结合: 到目前为止,我在Firefox中对其进行了测试-边框图像考虑了边框半径,但始终存在边框颜色覆盖-如果我有50%的透明度,我会看到条带和选定的颜色-但我只想要条带…如果我使用

  • 问题内容: 考虑以下HTML: 请注意,最后一个单元格的内联样式具有左右边框。您(或至少是我)希望看到它。在IE中,就是这种情况。但是在Firefox(6)中却不是。您可以通过以下方法解决此问题: 在CSS中移除相对位置 在CSS中更改为 在CSS中删除on 在CSS中删除on 这是我们代码的简化版本;我们也解决了它(选择选项2)。但是我想知道的是: 这是Firefox中的错误吗? 这是IE中的错

  • 当前结果:下边框为灰色 所需结果:所有边框均为白色 问题:CSS中的边框颜色设置为白色

  • 问题内容: 在当前的工作中,我需要在容器上产生一个双边框。边框样式:double;做到这一点,但是我的客户希望外部边界更厚,内部边界具有正常的厚度。 除了创建2个div之外,还有1个嵌套在另一个div中,外部div具有更大的厚度,或者通过使用边框图像,有什么方法可以用CSS来实现,而仅使用1 div?指定边框样式:double; 并且仍然能够使外边界更厚。 问题答案: 轮廓包含在CSS3规范中,并

  • 主要内容:1. border-style,2. border-width,3. border-color,4. borderCSS 中的边框是围绕着元素内容和内边距的一条或多条线段,您可以自定义这些线段的样式、宽度以及颜色。您可以通过下面几个属性分别定义边框的样式、宽度和颜色: border-style:设置边框的样式,例如实线、虚线等; border-width:设置边框的宽度(厚度); border-color:设置边框的颜色; border:上面三个边框属性的缩写。 1. border-s

  • 问题内容: 假设我有这样的标记: 然后是CSS 我的外部div和和单元格为何仍不折叠?我在这里想念什么? 顺便说一下,一列中单元格的数量可能是可变的,所以我不能只在一侧有边框。 问题答案: 这是一个演示 首先,您需要更正其语法错误 不