【问题标题】:Is it possible to have a border around a table row in some way?是否可以以某种方式在表格行周围设置边框?
【发布时间】:2011-04-05 02:43:59
【问题描述】:

我正在尝试在特定表格行周围添加边框,当鼠标进入该行时,这些边框会改变其颜色。但是,除非使用border-collapse:collapse;,否则我根本看不到边框,但我必须避免边框折叠,因为在某些情况下,边框在左、右和底部可见但在顶部不可见(可能是因为我不能有填充/margin 当使用边框折叠时)。

有没有办法做到这一点?

<table style="border-collapse:collapse;">
  <tr style="border:1px solid black">
    <td>Cell_1</td>
    <td>Cell_2</td>
  </tr>
</table>

【问题讨论】:

  • 你用的是什么浏览器?我可以看到有和没有 border-collapse:collapse; 的边框

标签: html css html-table


【解决方案1】:

您可以尝试改用outline

tr:hover {
    outline: 1px solid #999;
}

看看:http://jsfiddle.net/dWWkx/3/

【讨论】:

  • 谢谢,这似乎正是我正在寻找的。但是,我看不到 Google Chrome 的边框,而 Firefox 3.6 则按预期显示。奇怪...
  • @wdguru 嗯... outline 属性的问题在于它更多地用作调试工具,因为规范中没有明确定义边框的位置。 Webkit 可能不支持tr 上的大纲 - IE 7 及以下版本根本不支持此功能。见:reference.sitepoint.com/css/outline
【解决方案2】:

据我所知,您不能在表格行上设置边框,但可以在表格单元格上设置边框 (&lt;td&gt;)。 通过一些创造性的border-right和border-left,单元格间距为0,您应该能够实现整个行周围的边框外观。

【讨论】:

    【解决方案3】:

    我遇到了完全相同的问题并找到了这个解决方法:

    <tr class="border_bottom">
    

    CSS:

    tr.border_bottom td {
       border:1pt solid black;
    }
    

    在这里找到并调整它:Add border-bottom to table row <tr>

    【讨论】:

      【解决方案4】:

      试试这个:

      <table style="">    
         <tr style="display:block;border:1px solid black">    
            <td>Cell_1</td>    
            <td>Cell_2</td>    
         </tr>    
         <tr style="display:block;border:1px solid black">    
            <td>Cell_1</td>    
            <td>Cell_2</td>    
         </tr>    
      </table>
      

      【讨论】:

      • 谢谢,但我以前试过这个。 display:block 的问题是,该行没有像 display:table-row 那样被拉伸。
      猜你喜欢
      • 2021-01-03
      • 1970-01-01
      • 1970-01-01
      • 2017-05-23
      • 1970-01-01
      • 2010-12-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多