在表格中的特定行周围边框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (30)

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

无论如何,我有一个表有多个行和列,有些与rowspan和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>

有没有更简单的方法来做我想要的?我尝试应用顶部和底部,<tr>但它不起作用。(ps我是新来的CSS,所以这可能是我错过的一个非常基本的解决方案。)

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

提问于
用户回答回答于

怎么样tr {outline: thin solid black;}?适用于tr或tbody元素,并且似乎与大多数浏览器兼容,包括IE 8+,但以前不兼容。

用户回答回答于

解决方案:

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}

<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>

输出:

而不必到补充的topbottomleft,和right班级的每一个<td>,都是我所要做的就是添加top row到顶部<tr>bottom row至底部<tr>,并且row每一个<tr>之间。这个解决方案有什么问题吗?是否有任何我应该注意的跨平台问题?

扫码关注云+社区