表格中特定行的边框？

120

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

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

html  css  border  css-tables 
— 凯尔·克罗宁（Kyle Cronin）
source
9
— 离题

Answers:

113

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

— 迷恋
source
我问的是在表格中的多行周围放置一个边框，实质上是在视觉上将其划分为多个部分，但在同一张表格中，以便不同部分的内容对齐。
— 凯尔·克罗宁
3
明白了，我也需要。用边框将要围成一排的行包围起来，上面的css将在它们周围创建一个边界-即，顶行在顶部，底行在底部，左并在tbody中所有行的右边框上。边框实际上不在这些行上，而是在tbody本身的轮廓上，只是试图描述效果。
— 致谢
哦，我知道，有多个发辫-可行，而且我没有考虑过。推荐:)
— 凯尔·克罗宁
我建议您使用nth-child（）css属性，而不要定义tbody，除非您确实有一些非常动态的数据。使用nth-child（），nth-last-child（）和not（），可以选择所需的任何行/单元（只要您知道表中事物的相对索引）。例如，您可以使用tr：not（：nth-​​child（-n + 2））：not（：nth-​​last-child（1））选择除顶部和底部的所有行之外的所有行
— BT
1
请注意，轮廓线不能为元素的特定边加上边框。例如，没有“概述顶部”。这是一个有限的解决方案
— BT
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班级的每一个<td>，都是我所要做的就是添加top row到顶部<tr>，bottom row至底部<tr>，并且row每一个<tr>之间。这个解决方案有什么问题吗？我应该注意任何跨平台问题吗？

— 凯尔·克罗宁（Kyle Cronin）
source
只是通过浏览器快照进行了测试，看起来IE（所有版本）不喜欢第一个孩子和最后一个孩子属性。：-/
— 凯尔·克罗宁
1
看起来IE 7和8支持第一个孩子，但不支持最后一个孩子（！）msdn.microsoft.com/zh-cn/library/cc351024
— mechanical_meat，2009年
该cellspacing属性在HTML5中已弃用。好像CSS table { border-collapse: collapse; border-spacing: 0; }是现在要走的路。
— Stefan van den Akker，2014年
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输出

— 日出
source
8

我也只是在玩这个，这似乎是我的最佳选择：

<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？）。:-(

— 西蒙·伊斯特
source
6
该解决方案是不正确的：“ display：table”将整个行放入一个表单元格---您将失去表的其他行的格式。我在Firefox和Chromium中尝试过此操作。
— Yaakov Belch
Yaakov，我认为您指的是流体列的宽度不再与表中的其他行对齐（如该小提琴所示：jsfiddle.net/MrKtw），但是边框/颜色格式仍然可以正常工作。解决方案是为TR和TD指定指定的宽度（px或％）。
— 西蒙东
西蒙，为了说明我的意思，我分叉并改变了您的小提琴。看一下：jsfiddle.net/a6DZV ---我仅将“ display：table”格式应用于一行。如您所见，这有效地将这一行变成了表格的一个单元格。换句话说：与将单行表嵌套在另一个表的单元格中（并显示此内部表的边框）时，您得到的输出相同。您的解决方案在DOM中保存了一些节点，但是不兼容。
— Yaakov Belch
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>
— 西普维兹
source
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;
}
— CSI
source
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>
— 西普维兹
source
感谢您的回答; 您对布局问题的看法是正确的-我希望您无需手动进行排列即可。将类应用于<tr>标签怎么办？
— 凯尔·克罗宁
如果您使用带有“ table-layout：fixed”的表，并显式设置每列的宽度（通过使用<col>或仅设置第一行中单元格的宽度），则无论内容如何，​​这些列都会对齐。您甚至不需要嵌套表，三个单独的表可以很好地完成示例。
— bobince
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>

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

— 克莱图斯
source
1
好像您只是在向td标签添加类？为什么不能用某些静态生成的服务器端脚本或仅由手工生成的最坏情况来完成此操作？对我来说似乎是JavaScript滥用。
— Thomas Thomas
3
实际上，发帖人要求提供Javascript解决方案。您不能说这是Javascript滥用，因为没有足够的信息。例如，是否由于单击用户而添加了边框？如果是这样，则服务器解决方案不正确。
— cletus
抱歉缺少信息。这将在服务器端生成，因此确实可以手动添加类，但是我确实喜欢JS解决方案如何为此提供一个更简单的接口。因此，尽管我可能不会使用JS，但这是一个很好的解决方案。
— 凯尔·克罗宁
0

诀窍在于具有轮廓属性，这要归功于谜题的答案，而无需进行任何修改

使用这个课程 

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

然后在HTML中

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

结果是 在此处输入图片说明 希望这对您有帮助

— Basheer AL-MOMANI
source
-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
— 柯蒂斯
source
1
OP要求一种更简便的方法
— Orique
2
请注意，OP还要求以更简单的方式在HTML / CSS中进行操作。我在他的问题中没有看到VB或VBA关键字。我建议您看看我们的“帮助”部分：stackoverflow.com/help/how-to-answer祝您好运。
— ForceMagic
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.