Question

我想隐藏表格特定行的边框。怎么做？任何想法？
示例代码是高度赞赏的。

Answer 1

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

在我的示例中，我创建了一个课程noBorder，我将其提供给一个<tr>。然后，我使用一个简单的选择器tr.noBorder td通过分配{{1}来使<td>类<tr>内的所有noBorder的边框消失}。

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

＆＃13;

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

＆＃13;

此处输出为图像：

Output from HTML

Answer 2

我用这个效果很好：

border-style:hidden;

它也适用于：

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

示例：

＆＃13;

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

＆＃13;

结果如下：

Answer 3

您可以在这里添加这些代码行来隐藏行

你可以写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 4

以编程方式将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 个答案: