Wie setze ich den Rahmen auf <tbody> Element?

Warum zeigt die Grenze im Folgenden nicht tbody? Ich versuchte rules="groups" und der Rand erscheint, aber nur zwischen den beiden tbody Sektionen und es ist zusammengebrochen.Wie setze ich den Rahmen auf <tbody> Element?

table.sectioned tbody { 
 
    border: 2px solid black; 
 
    border-collapse: separate; 
 
    border-spacing: 4px; 
 
}

<table class="sectioned"> 
 
    <tbody> 
 
    <tr><td colspan="2"><b>General Data</b></td></tr> 
 
    <tr><td>Tail Number</td><td>N0809021</td></tr> 
 
    <tr><td>Type of Ownership</td><td>personal</td></tr> 
 
    <tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr> 
 
    <tr><td>Year of Manufacture</td><td>1999</td></tr> 
 
    <tr><td>Use of Aircraft</td><td>private</td></tr> 
 
    <tr><td>Start Date</td><td></td></tr> 
 
    <tr><td>Policy Length</td><td>6 months</td></tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr> 
 
    <tr><td>Manufacturer</td><td></td></tr> 
 
    <tr><td>Model</td><td></td></tr> 
 
    <tr><td>Engine Make</td><td></td></tr> 
 
    <tr><td>Number of Seats</td><td></td></tr> 
 
    </tbody> 
 
</table>

Quelle

2013-09-24 George

hinzufügen Anzeige: Block und die Grenze wird sich zeigen. –

@Keith, tbody ist ein Containerelement für den Körperteil eines Tabellenelements http://stackoverflow.com/questions/923655/is-there-a-direct-purpose-for-htmls-tbody –

Danke, Barbara. display: block hat den rand angezeigt, obwohl ohne border-spacing. Gibt es eine Möglichkeit, Grenzabstände zu erreichen? – George

hinzufügen Anzeige: Block zu Ihrem tbody Stil. Versuchen Sie, diese

tbody{ 
    display:block; 
    border: 2px solid black; 
    border-collapse: separate; 
    border-spacing: 4px; 
}

Sie können es testen auf dieser fiddle

Quelle

2013-09-24 19:21:47

Danke, Brian. Das hat den Trick gemacht. Und der Rand unten: 10px in deiner Geige verursachte die Trennung der Grenzen. – George

Beachten Sie, dass das Ändern des Anzeigetyps des tbody die Spalten nicht mehr in eine Reihe bringt: http://jsfiddle.net/bPL86/1/ – cimmanon

Ich sehe das, Cimmanon. Es ist, als ob jeder tbody sein eigener Tisch wird. Schade. Ich denke, das Beste, was ich damit machen kann, ist, dass die erste Spalte eine feste Breite hat. – George

Anzahl:

table {border-collapse: collapse;}

FIDDLE

Quelle

2013-09-24 19:20:13 Riskbreaker

Sollte Antwort angenommen werden. Der eine akzeptiert bricht den Tisch und ist in hohem Maße falsch. –

Verwenden box-shadow statt border. Es funktioniert unabhängig davon, welcher Wert von border-collapse angewendet wurde. Darüber hinaus können Sie auch darauf anwenden.

tbody { 
 
    box-shadow: 0 0 0 1px black; 
 
    border-radius: 5px; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Eve</td> 
 
     <td>Jackson</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2018-02-16 16:33:28 Stickers

Wie setze ich den Rahmen auf <tbody> Element?

Antwort

Verwandte Themen