表格中特定行的边框？

Posted 2023-03-05

技术标签:

【中文标题】表格中特定行的边框？【英文标题】：Border around specific rows in a table? 【发布时间】：2010-10-14 19:12:50 【问题描述】：

我正在尝试设计一些可以在表格中的特定行周围放置边框的 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>，但没有奏效。（附：我是 CSS 新手，所以我可能错过了一个非常基本的解决方案。）

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

【问题讨论】：

题外话，但我只想说，表格非常合适，在显示表格数据时推荐...... 【参考方案1】：

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

【讨论】：

我问的是如何在表格中的多行周围放置一个边框，本质上是在视觉上将其划分为多个部分，但在同一个表格中，因此来自不同部分的内容会对齐。明白，我也需要那个。在它们自己的 tbody 中包含你想要一个边框的行集，上面的 css 将在它们的集合周围创建一个边框 - 即顶行的顶部边框，底行的底部边框，左和 tbody 中所有行的右边框。边框实际上并不“在”这些行上，它们在 tbody 本身的轮廓上，只是试图描述效果。哦，我明白了，多个 tbodys - 这很有效，而且是我没有考虑过的。赞成:) 我建议使用 nth-child() css 属性而不是定义 tbodys，除非你真的有一些非常动态的数据。使用 nth-child()、nth-last-child() 和 not()，您可以选择所需的任何行/单元格（只要您知道表中事物的相对索引）。例如，您可以使用 tr:not(:nth-child(-n+2)):not(:nth-last-child(1)) 选择除顶部两行和底部一行之外的所有行请注意，轮廓不有可能为元素的特定边设置边框。例如，没有“大纲顶部”。这是一个有限的解决方案【参考方案2】：

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

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>、@ 987654333@ 到底部 <tr>，row 到每个 <tr> 之间。这个解决方案有什么问题吗？是否有任何我应该注意的跨平台问题？

【讨论】：

刚刚通过 browsershots 进行了测试，看起来 IE（所有版本）不喜欢 first-child 和 last-child 属性。 :-/ 看起来 IE 7 和 8 支持 first-child，但不支持 last-child (!) msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx cellspacing 属性在 HTML5 中已弃用。似乎 CSS table border-collapse: collapse; border-spacing: 0; 是现在要走的路。【参考方案3】：

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

输出：

【讨论】：

【参考方案4】：

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

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

【讨论】：

此解决方案不正确：“display: table”将整行放入一个表格单元格 --- 您会丢失表格中其他行的格式。我在 Firefox 和 Chromium 中试过这个。 Yaakov，我认为您所指的是流体列宽不再与表格中的其他行对齐（如本小提琴所示：jsfiddle.net/MrKtw）但边框/颜色格式仍然有效好的。解决方案是给 TR 和 TD 指定宽度（px 或 %）。西蒙，为了说明我的意思，我分叉并改变了你的小提琴。看看这个：jsfiddle.net/a6DZV --- 我只将“显示：表格”格式应用于一行。如您所见，这会将这一行有效地转换为表格的一个单元格。换句话说：您获得的输出与将单行表嵌套在另一个表的单元格内（并显示此内表的边框）相同。您的解决方案在 DOM 中保存了一些节点，但不兼容。【参考方案5】：

这是一种使用 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>

【讨论】：

【参考方案6】：

使用<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;

【讨论】：

【参考方案7】：

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

根据您的其他布局要求，您的方法可能是最好的方法，此处建议的方法只是一种可能的替代方法。

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

【讨论】：

感谢您的回答；不过，您对布局问题是正确的-我希望列在不手动进行的情况下排列。将一个类应用于标签怎么样？这可能吗？如果您使用带有“table-layout: fixed”的表格并明确设置每列的宽度（通过使用或仅设置第一行中单元格的宽度），列无论内容如何，都会排队。您甚至不需要嵌套表格，三个单独的表格就可以很好地完成示例。 【参考方案8】：

根据您希望在任意 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>

我很乐意接受有关更简单方法的建议...

【讨论】：

您似乎只是在向 td 标签添加类？为什么不能使用一些服务器端脚本、静态生成或仅手动生成最坏的情况？在我看来，这像是滥用 JavaScript。实际上海报要求 Javascript 解决方案。您不能说这是滥用 Javascript，因为没有足够的信息。例如，是否因为单击用户而添加了边框？如果是这样，则服务器解决方案不正确。抱歉信息不足。这将在服务器端生成，因此我确实可以手动添加类，但我确实喜欢 JS 解决方案如何提供更简单的接口来执行此操作。因此，虽然我可能不会使用 JS，但它是一个很好的解决方案。【参考方案9】：

诀窍在于 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>

结果是希望对你有帮助

【讨论】：

【参考方案10】：

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

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

【讨论】：

OP 正在寻求一种更简单的方法小心，OP 还要求在 HTML/CSS 中使用更简单的方法。我在他的问题中没有看到 VB 或 VBA 关键字。我建议你看看我们的帮助部分：***.com/help/how-to-answerGood Luck。

以上是关于表格中特定行的边框？的主要内容，如果未能解决你的问题，请参考以下文章

特定表格行之间的边框和间距

如何从 HTML 表格中删除特定单元格？

为啥 CSS 转换翻译会将表格行的边框留在原来的位置？

word表格分页后最上面的边框不显示怎么办

HTML---图像标记和表格标记

在Excel中怎样快速删除表格边框？教你操作技巧，一招解决