Jak ustawić obramowanie do elementu <tbody>?

Dlaczego poniżej granicy nie widać numeru tbody? Próbowałem rules="groups" i pojawiło się obramowanie, ale tylko między dwiema sekcjami tbody i jest zwinięte.Jak ustawić obramowanie do elementu <tbody>?

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>

Źródło

2013-09-24 George

Dodaj display: block i granicy pojawi się. –

@Keith, tbody to element kontenera dla części ciała elementu tabeli http://stackoverflow.com/questions/923655/is-there-a-direct-purpose-for-htmls-tbody –

Dzięki, Barbara. display: block spowodował wyświetlenie granicy, chociaż bez odstępów między wierszami. Czy istnieje sposób, aby uzyskać tutaj odstępy między wierszami? – George

Dodaj display: block do stylu TBODY. Spróbuj tego

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

Można przetestować go na tej fiddle

Źródło

2013-09-24 19:21:47

Dzięki, Brian. To wystarczyło. A margines dolny: 10px w twoim skrzypcach spowodowało rozdzielenie granic. – George

Pamiętaj, że modyfikowanie typu wyświetlania tbody powoduje, że kolumny nie są już ustawione: http://jsfiddle.net/bPL86/1/ – cimmanon

Widzę to, cimmanon. To tak, jakby każdy tbody stał się własnym stołem. Szkoda. Sądzę, że najlepsze, co mogę z tym zrobić, to uczynić pierwszą kolumnę stałą szerokością. – George

Dodaj:

table {border-collapse: collapse;}

FIDDLE

Źródło

2013-09-24 19:20:13 Riskbreaker

Należy przyjąć odpowiedź. Ten, który został przyjęty, łamie tabelę i jest bardzo niepoprawny. –

użytkowania box-shadow zamiast border. Działa niezależnie od wartości border-collapse. Ponadto można również zastosować do niego border-radius.

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>

Źródło

2018-02-16 16:33:28 Stickers

Jak ustawić obramowanie do elementu <tbody>?

Odpowiedz

Powiązane problemy