如何隐藏表格指定行的边框？答案

【问题标题】：How to hide the border for specified rows of a table?如何隐藏表格指定行的边框？
【发布时间】：2012-07-16 01:48:31
【问题描述】：

我想隐藏表格中特定行的边框。怎么做？
有什么想法吗？
示例代码受到高度赞赏。

【问题讨论】：

您有很多问题没有公认的答案。请go back through your questions 并接受对您有帮助的答案。另外，请展示您尝试过的内容。
然后先用谷歌搜索你的问题...

标签： html css html-table border

【解决方案1】：

在<td>s 后面的<tr>s 上使用CSS 属性边框，您不希望有边框。

在我的示例中，我创建了一个课程 noBorder，并将其分配给了一个 <tr>。然后我使用一个简单的选择器tr.noBorder td，通过分配border: 0，使<tr>s 内部的所有<tr>s 的边框消失，noBorder 类。

请注意，如果您将某些内容设置为0，则无需提供单位（即px），因为无论如何这都无关紧要。零就是零。

table, tr, td {
  border: 3px solid red;
}
tr.noBorder td {
  border: 0;
}

<table>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
  </tr>
  <tr class="noBorder">
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>A3</td>
    <td>A3</td>
  </tr>
</table>

这是输出的图像：

【讨论】：

@vikrantx 是对的，直接属性是border-style，尽管border: dashed 也可以使用，因为您不需要使用完整的border: 1px dashed black 表单。
真的很有帮助-----MVP

【解决方案2】：

我用这个效果很好：

border-style:hidden;

它也适用于：

border-right-style:hidden; /*if you want to hide just a border on a cell*/

例子：

<style type="text/css">
      table, th, td {
       border: 2px solid green;
      }
      tr.hide_right > td, td.hide_right{
        border-right-style:hidden;
      }
      tr.hide_all > td, td.hide_all{
        border-style:hidden;
      }
  }
</style>
<table>
  <tr>
    <td class="hide_right">11</td>
    <td>12</td>
    <td class="hide_all">13</td>
  </tr>
  <tr class="hide_right">
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr class="hide_all">
    <td>31</td>
    <td>32</td>
    <td>33</td>
  </tr>
</table>

结果如下：

【讨论】：

【解决方案3】：

以编程方式将 noborder 类添加到特定行以隐藏它

<style>
     .noborder
      {
        border:none;
      }
    </style>

<table>

    <tr>
       <th>heading1</th>
       <th>heading2</th>
    </tr>


    <tr>
       <td>content1</td>
       <td>content2</td>
    </tr>
    /*no border for this row */
    <tr class="noborder">
       <td>content1</td>
       <td>content2</td>
    </tr>

</table>

【讨论】：

【解决方案4】：

您可以简单地在此处添加这些代码行来隐藏一行，

您可以写border:0 或border-style:hidden; border: none 否则会发生同样的事情

<style type="text/css">
              table, th, td {
               border: 1px solid;
              }
              
              tr.hide_all > td, td.hide_all{
                 border: 0;
                
              }
          }
        </style>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100</td>
      </tr>
      <tr class= hide_all>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300</td>
      </tr>
      <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250</td>
      </tr>
    </table>

运行这几行代码就可以轻松解决问题

【讨论】：