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

Question

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

Answer 1

在您不希望有边框的

<td>

后面的

<tr>

上使用 CSS 属性边框。

在我的示例中，我创建了一个课程

noBorder

，并给了一个

<tr>

。然后，我使用一个简单的选择器

tr.noBorder td

，通过分配

<td>

，使

<tr>

类中

noBorder

内部的所有

border: 0

的边框消失。

请注意，如果您将某些内容设置为

px

，则无需提供单位（即

0

），因为无论如何都没关系。零就是零。

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>

这是图像的输出：

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

结果如下：

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

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

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

Answer 5

所有解决方案都不适合我。

我最终通过隐藏表格的所有边框并创建带有边框的单元格类来使其工作。 所有单元格都具有带边框的类。 除了那些应该无边框显示的行。

希望对某人有帮助。