删除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表格中的一些边框

回答

相关问题