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

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

2012-07-17 Mr.Chowdary

你有很多问题没有一个接受的答案。请[回到你的问题]（http://stackoverflow.com/users/1468481/laxman-chowdary?tab=questions&sort=votes）并接受帮助你的答案。另外，请显示你的尝试。 – simbabque 2012-07-17 07:09:14

然后第一谷歌你的问题... – 2012-07-24 16:13:35

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

在我的例子中，我创建了一个类noBorder，我给了一个<tr>。然后，我用一个简单的选择tr.noBorder td使边界消失的所有<td> S中的的<tr> s的的noBorder类内部通过分配border: 0。

请注意，如果您将某些内容设置为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>

这里的输出图像：

Output from HTML

来源

2012-07-17 07:06:51 simbabque

Simbabque嗨，这是好的。如何使边界线为虚线.. – 2012-07-17 07:10:40

尝试。边框样式：虚线; – vikrantx 2012-07-17 07:13:50

@vikrantx是正确的，直接属性是'border-style'，虽然'border：dashed'也可以工作，因为你不需要使用完整的'border：1px dashed black'形式。 – simbabque 2012-07-17 07:19:16

编程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-17 07:09:09 vikrantx

我知道你为什么回答吗？你的答案已经回答。 – 2017-12-21 05:24:34

我用这个用良好的效果：

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-26 20:59:37

你可以简单地在此处添加代码，这些行要隐藏行，

要么你可以写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-21 05:04:28

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

回答

相关问题