首页 文章

围绕表中特定行的边框？

提问于
浏览 次
117

我正在尝试设计一些HTML / CSS，它可以在表格中的特定行周围放置边框 . 是的，我知道我不是真的应该使用表格进行布局，但我不知道足够的CSS来完全替换它 .

无论如何，我有一个包含多行和多列的表，有些与rowspan和colspan合并，而我使用4个独立的CSS类（顶部，底部，左侧，右侧）连接到顶部的 <td> 单元格，分别是 table 的左下角和右下角 .

.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，所以's probably a really basic solution to this that I'错过了 . ）

note: 我确实需要有多个边界部分 . 基本思想是拥有多个边界集群，每个集群包含多行 .

html css border css-tables

10 回答

  • 0

    tr {outline: thin solid black;} 怎么样？在tr或tbody元素上为我工作，appears与大多数浏览器兼容，包括IE 8，但之前没有 .

    回复于
  • 1

    谢谢所有回复的人！我已经尝试了这里提出的所有解决方案，并且我已经在互联网上搜索了更多其他可能的解决方案，我想我找到了一个有前途的解决方案：

    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>

    Output:

    enter image description here

    不必将 top ， bottom ， left 和 right 类添加到每个 <td> ，我所要做的就是将 top row 添加到顶部 <tr> ， bottom row 添加到底部 <tr> ，将 row 添加到每个 <tr> 之间 . 这个解决方案有什么问题吗？我应该注意哪些跨平台问题？

    回复于
  • 8

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

    Output:

    HTML output

    回复于
  • 34

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

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

    请注意 this will prevent the use of fluid/automatic column widths ，因为单元格将不再与其他行中的对齐，但边框/颜色格式仍然可以正常工作 . 解决方案是 give the TR and TDs a specified width （px或％） .

    当然，如果你只想将它应用于某些行，你可以制作选择器 tr.myClass . 显然 display: table 不可能是其他黑客（hasLayout？）可能适用于那些人 . :-(

    回复于
  • 51

    这是一种使用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>
    回复于
  • 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;
}
    回复于
  • -4

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

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

    <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>
    回复于
  • 110

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

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

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

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

    回复于
  • 3

    诀窍是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>

    结果是
    enter image description here
    希望这会对你有所帮助

    回复于
  • 1

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

    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
    回复于

相关问题