如何隱藏表格的指定行的邊框？

我想隱藏表格的特定行的邊框。怎麼做？
任何想法？
示例代碼是高度讚賞。如何隱藏表格的指定行的邊框？

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

如何隱藏表格的指定行的邊框？

回答

相關問題