刪除HTML表格中的一些邊框

-3

我在HTML中構建表格，我很驚訝，因爲我遇到了一個簡單的問題：我想刪除一些行的頂部邊界。這裏的codePen例如：刪除HTML表格中的一些邊框

http://codepen.io/Loreno/pen/PpNwPy?editors=1000

在本例中的某些行有一個類hideTopBorder。這個類看起來像這樣：

.hideTopBorder {border-top: none;}

我希望邊界消失，但它們仍然存在。我也嘗試將這個類添加到行內的單元格中，但它仍然不起作用。這似乎是這麼簡單的事情，但對我來說卻變得很難。

來源

2017-03-02 Loreno

你要編輯plunker，它將不再包含相關的代碼你的問題。這個問題需要包含一個[mcve]。 –

#hideTopBorder {border-top：none;} –

@LakshmanKambam爲什麼？＃是用於ID的。 – Loreno

爲了獲得您想要的效果，您需要將其應用於td並刪除底部邊框。試試這個：

.tg { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
} 
 

 
.tg td { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 14px; 
 
    padding: 10px 5px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    overflow: hidden; 
 
    word-break: normal; 
 
} 
 

 
.tg th { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    padding: 10px 5px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    overflow: hidden; 
 
    word-break: normal; 
 
} 
 

 
.tg .tg-yw4l { 
 
    vertical-align: top 
 
} 
 

 
.width-25 { 
 
    width: 25%; 
 
} 
 

 
.hideTopBorder td { 
 
    border-top: none; 
 
    border-bottom: none; 
 
}

<div id="report-div"> 
 
    <table class="tg"> 
 
    <tr> 
 
     <th class="tg-yw4l" colspan="4">TEST DATA</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-yw4l" colspan="4">DESCRIPTION</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-yw4l" style="width: 50%;" colspan="2">Customer </td> 
 
     <td class="tg-yw4l" style="width: 50%;" colspan="2">Analyze</td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="hideTopBorder tg-yw4l width-25">Name:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Owner:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">contact:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Type:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Phone number:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Model</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Mail</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Location</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Contact</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">number:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Site</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">board:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-yw4l" colspan="4">SOMETHING</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2017-03-02 15:16:33

謝謝，很好的解決方案 – Loreno

@Loreno沒問題！很高興幫助！ :) –

刪除HTML表格中的一些邊框

回答

相關問題