124

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

有没有更简单的方法来做我想做的事？我尝试将顶部和底部应用于 a<tr>但它没有用。（ps我是CSS新手，所以我可能错过了一个非常基本的解决方案。）

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

4

10 回答 10

118

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

于 2013-06-04T16:16:04.867 回答
53

感谢所有回复的人！我已经尝试了这里提供的所有解决方案，并且我在互联网上进行了更多搜索以寻找其他可能的解决方案，我认为我找到了一个很有希望的解决方案：

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>

输出：

在此处输入图像描述

不必将top, bottom,left和right类添加到 each <td>，我所要做的就是添加top row到 top <tr>，bottom row到 bottom <tr>，以及中间的roweach <tr>。这个解决方案有什么问题吗？是否有任何我应该注意的跨平台问题？

于 2009-03-22T04:55:32.013 回答
36

如果您在父表上设置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>

输出：

HTML 输出

于 2012-11-22T11:12:24.217 回答
9

我也只是在玩这个，这对我来说似乎是最好的选择：

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

请注意，这将阻止使用流式/自动列宽，因为单元格将不再与其他行中的单元格对齐，但边框/颜色格式仍然可以正常工作。解决方案是给 TR 和 TD 指定宽度（px 或 %）。

当然，tr.myClass如果您只想将选择器应用于某些行，您可以制作选择器。然而，显然display: table不适用于 IE 6/7，但可能还有其他可能适用于这些的黑客（hasLayout？）。:-(

于 2012-01-09T05:20:39.897 回答
3

这是一种使用 tbody 元素的方法，可能是这样做的方法。您不能在 tbody 上设置边框（与不能在 tr 上相同），但您可以设置背景颜色。如果您想要达到的效果可以通过行组上的背景颜色而不是边框​​来获得，这将起作用。

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
于 2009-03-22T03:16:56.960 回答
2

使用标签将行组合在一起<tbody>，然后应用样式。

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>

以及 style.css 中的 css

.red-outline {
  outline: 1px solid red;
}
于 2014-02-21T20:35:39.417 回答
1

根据您希望在任意 MxN 单元块周围放置边框的要求，如果不使用 Javascript，确实没有更简单的方法可以做到这一点。如果你的单元格是固定的，你可以使用浮点数，但由于其他原因这是有问题的。你正在做的事情可能很乏味，但没关系。

好的，如果您对使用 jQuery（我的首选方法）的 Javascript 解决方案感兴趣，您最终会得到这段相当可怕的代码：

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

我很乐意就更简单的方法提出建议......

于 2009-03-22T02:32:16.303 回答
1

我能想到的唯一另一种方法是将需要边框的每一行包含在嵌套表中。这将使边框更容易做到，但可能会产生其他布局问题，您必须手动设置表格单元格的宽度等。

根据您的其他布局要求，您的方法可能是最好的方法，这里建议的方法只是一种可能的选择。

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
于 2009-03-22T02:35:24.487 回答
1

由于enigment的回答几乎没有修改，诀窍在于大纲属性

使用这个类

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

然后在 HTML

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

结果是 在此处输入图像描述 希望这对你有帮助

于 2017-01-26T10:25:14.550 回答
-5

一种更简单的方法是使表成为服务器端控件。你可以使用类似的东西：

Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next
于 2013-07-09T21:44:44.543 回答