表格中特定行的边框？

一尘不染

表格中特定行的边框？

css

我正在尝试设计一些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的新手，所以我可能错过了一个非常基本的解决方案。）

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

阅读 219

2020-05-16

共1个答案

一尘不染

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

2020-05-16