44

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

4

4 回答 4

60

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

在我的例子中，我做了一个noBorder我给 one的课程<tr>。然后，我使用一个简单的选择tr.noBorder td器通过分配.<td><tr>noBorderborder: 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>

这是作为图像的输出：

从 HTML 输出

于 2012-07-17T07:06:51.593 回答
22

我用这个效果很好：

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>

结果如下： 在此处输入图像描述

于 2016-01-26T20:59:37.103 回答
0

以编程方式将 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>
于 2012-07-17T07:09:09.283 回答
0

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

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

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

于 2017-12-21T05:04:28.207 回答