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

表格中特定行的边框?

马渊
2023-03-14
问题内容

我正在尝试设计一些HTML / CSS,可以在表中的特定行周围放置边框。是的,我知道我真的不应该使用表格进行布局,但是我还不了解足够的CSS来完全替代它。

无论如何,我有一个包含多个行和列的表,其中一些与rowpan和colspan合并,我想在表的各个部分周围放置一个简单的边框。目前,我正在使用4个单独的CSS类(顶部,底部,左侧,右侧),分别附加到<td>表格顶部,底部,左侧和右侧的单元格。

.top {

  border-top: thin solid;

  border-color: black;

}



.bottom {

  border-bottom: thin solid;

  border-color: black;

}



.left {

  border-left: thin solid;

  border-color: black;

}



.right {

  border-right: thin solid;

  border-color: black;

}


<html>



<body>



  <table cellspacing="0">

    <tr>

      <td>no border</td>

      <td>no border here either</td>

    </tr>

    <tr>

      <td class="top left">one</td>

      <td class="top right">two</td>

    </tr>

    <tr>

      <td class="bottom left">three</td>

      <td class="bottom right">four</td>

    </tr>

    <tr>

      <td colspan="2">once again no borders</td>

    </tr>

    <tr>

      <td class="top bottom left right" colspan="2">hello</td>

    </tr>

    <tr>

      <td colspan="2">world</td>

    </tr>

  </table>



</html>

有什么更简单的方法可以做我想要的吗?我尝试将top和bottom应用于a,<tr>但是没有用。(ps我是CSS的新手,所以我可能错过了一个非常基本的解决方案。)

注意: 我确实需要有多个带边框的部分。基本思想是具有多个带边框的群集,每个群集包含多个行。


问题答案:

怎么tr {outline: thin solid black;}样我可以在tr或tbody元素上使用,并且似乎与大多数浏览器兼容,包括IE 8+,但以前没有。



 类似资料:
  • 问题内容: 是否可以一次性为表格行加上边框,而不是给单个单元格加上边框,例如, 这在给定的周围给出了边界,但在单个单元格周围需要了边界。 我们可以一口气给边界吗? 问题答案: 您可以在元素上设置属性,但是根据CSS 2.1规范,此类属性在分隔的边框模型中不起作用,这通常是浏览器中的默认设置。参考:17.6.1 分隔的边框模型。该 初始_值是根据CSS 2.1,以及一些浏览器也将其设置为 _默认值

  • 问题内容: 我有一个3 x 3的表格。我需要一种为每行底部添加边框并为其指定特定颜色的方法。 首先,我尝试了直接方式,即: 但这没有用。所以我像这样添加了CSS: 那仍然没有用。 我更喜欢使用CSS,因为这样我就不必在每一行中添加一个属性。我尚未向中添加属性。我希望那不会影响我的CSS。 问题答案: 我以前有这样的问题。我认为不能直接采用边框样式。我的解决方法是在行中设置s的样式: CSS:

  • 对于某些表格单元格,我希望有一个多色的上边框或下边框。 基于如何创建多色边框与css和css-多色边框,我能够创建多色边框。 问题是,我想将其组合为一个表格单元格,其中一些单元格具有普通边框,而另一些单元格具有多色边框。 下面的代码设置单元格的多色,但只要我想为“普通”单元格添加黑色边框,它就会覆盖多色边框(请参见代码笔) 这似乎使它部分起作用,必须为表格设置背景颜色。但这会导致粗边框线。 能做些

  • 我有如下HTML结构: 我使用Selenium,需要通过使用XPath搜索这个唯一值来指向唯一值旁边的td。 我找到了解决方法:找到需要唯一值的tr,然后计算td的前一个兄弟,使用position()=count(前一个兄弟)+2 有更简单的方法吗?问题是表的结构可能会随着时间的变化而变化,但是所需的值总是紧挨着唯一的

  • 问题内容: 我想在表格中某个字段的上方放置一条线,以表明它是上述值的总和。但是,该表默认情况下已经带有边框。 这是一个示例:我有一张折叠了边框的桌子。我将边框底部设置在一个字段上,将边框顶部设置在其下方的字段上。这两个都指定相同的边框。使用最上面的CSS。有没有一种方法可以使用最底层的? 这显示了两个单元格之间有一条红线。有办法获得金线吗? 问题答案: 这是的已定义行为。《 O’Reilly CS

  • 本文向大家介绍awk 选择表格数据中的特定列,包括了awk 选择表格数据中的特定列的使用技巧和注意事项,需要的朋友参考一下 示例 我们假设使用的文件;作为列定界符。选择一组特定的列仅需要打印语句。例如,以下程序从其输入中选择列3、4和7: 通常可以更仔细地选择要打印的行。当第一个字段为Alice或时,以下程序从其输入中选择列3、4和7 Bob: