Entfernen Sie einige Grenzen in HTML-Tabelle

Question

Ich baue eine Tabelle in HTML und ich bin ziemlich überrascht, weil ich ein Problem mit einer einfachen Sache habe: Ich möchte Top-Grenzen einiger Zeilen entfernen. Hier codePen Beispiel:

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

Einige Zeilen in dem Beispiel eine Klasse hideTopBorder haben. Diese Klasse sieht so aus:

.hideTopBorder {border-top: none;} 

Ich würde erwarten, dass die Grenzen einfach verschwinden, aber sie sind immer noch da. Ich habe auch versucht, diese Klasse zu Zellen innerhalb der Zeilen hinzuzufügen, aber es funktioniert immer noch nicht. Es scheint so einfach zu sein, aber es hat sich als ziemlich schwierig für mich herausgestellt.

Answer 1

Um Ihren gewünschten Effekt zu erzielen, müssen Sie ihn auf die td anwenden und den unteren Rand entfernen. Versuchen Sie folgendes:

.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>