代码之家 › 专栏 › 技术社区 › Kyle Cronin

表中特定行的边框?

css-tables border css html

117

Kyle Cronin · 技术社区 · 15 年前

我正在设计一些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> 但它不起作用。(P.S.我对CSS不熟悉,所以我可能错过了一个非常基本的解决方案。)

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

10 回复 | 直到 7 年前

110

enigment 11 年前

怎么样 tr {outline: thin solid black;} ?在tr或tbody元素上为我工作,以及 appears 要与大多数浏览器兼容,包括IE 8+,但不是以前的浏览器。

Legends pawelglow 7 年前

感谢所有的回应!我已经尝试过这里提供的所有解决方案,我在互联网上搜索了更多其他可能的解决方案,我认为我找到了一个有希望的解决方案:

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>

输出:

enter image description here

而不是必须添加 top , bottom , left 和 right 类到每个 <td> 我要做的就是 top row 到顶端 <tr> , bottom row 到底 <TR & GT; 和 row 对每一个 <TR & GT; 介于两者之间。这个解决方案有什么问题吗?我是否应该了解任何跨平台问题?

Stefan van den Akker Raymond Hettinger 10 年前

如果你设置 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 output

Simon E. pbs 11 年前

我也只是在玩这个游戏,这似乎是我的最佳选择:

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

注意 这将阻止使用流体/自动列宽 ,因为单元格将不再与其他行中的单元格对齐,但边框/颜色格式仍然可以正常工作。解决办法是 为tr和td指定宽度 (Px或%)。

当然,你可以选择 tr.myClass 如果您只想将它应用于某些行。显然 display: table 但是,不适用于IE6/7,但可能还有其他黑客(hasLayout?)这可能对那些人有用。:

sipsorcery 15 年前

下面是一个使用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>

csi Mark B 10 年前

使用将行组合在一起 <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;
}

sipsorcery 15 年前

我能想到的另一种方法是将需要边框的每一行放在嵌套表中。这将使边框更容易操作,但可能会造成其他布局问题,您必须手动设置表格单元格的宽度等。

您的方法可能是最好的,这取决于您的其他布局要求,这里建议的方法只是一个可能的选择。

<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>

cletus 15 年前

根据您的要求,您希望在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>

我很乐意接受关于更简单方法的建议…

Community Mr_and_Mrs_D 7 年前

诀窍在于 outline property 多亏了 enigment's answer 很少修改

使用这个类

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

然后在HTML中

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

结果是希望这对你有帮助

-4

ForceMagic chooselife 11 年前

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

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