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

2018-07-01 20:16:11

我试图设计一些可以在表格中放置特定行的边框的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 {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>

如果您将border-collapse样式设置为在父表上collapse ，则应该能够对tr进行样式设置（样式对于演示而言是内联的）

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

输出：

链接地址: http://www.djcxy.com/p/88783.html

上一篇: Border around specific rows in a table?

下一篇: Why did XHTML have PCDATA inside script and style tags?