Nadanie obramowania wierszowi tabeli HTML, <tr>

90

Czy możliwe jest obramowanie wiersza tabeli <tr>za jednym razem zamiast nadawania obramowania poszczególnym komórkom, na <td>przykład

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Daje to obramowanie wokół danego, <tr>ale wymaga obramowania wokół poszczególnych komórek.

Czy możemy wyznaczyć granicę <tr>tylko za jednym razem?

→ jsFiddle

Malutki
źródło

Odpowiedzi:

121

Możesz ustawić borderwłaściwości trelementu, ale zgodnie ze specyfikacją CSS 2.1, takie właściwości nie mają wpływu na model oddzielnych obramowań, który jest zwykle domyślny w przeglądarkach. Por .: 17.6.1 Model rozdzielonych granic . ( Początkowa wartość border-collapsejest separatezgodna z CSS 2.1, a niektóre przeglądarki ustawiają ją również jako wartość domyślną dla table. Efektem netto jest to, że w prawie wszystkich przeglądarkach pojawia się oddzielna ramka, chyba że wyraźnie określono collapse).

Dlatego musisz użyć zwijających się granic. Przykład:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>
Jukka K. Korpela
źródło
1
@Robert Siemer Chociaż prawdą jest, że powoduje to obramowanie wierszy, wymaga również „border-collapse: collapse”. Kolumn nie można w ten sposób rozmieszczać przy użyciu właściwości cellpadding. Właściwość zarys użyta w poniższej odpowiedzi csmckelvey zapewnia większą kontrolę nad wyglądem tabeli i pozwala osiągnąć dokładnie ten sam cel. Nie powinno to być akceptowaną odpowiedzią, ponieważ niepotrzebnie ogranicza funkcjonalność do osiągnięcia celu.
me_
70

Absolutnie! Po prostu użyj

<tr style="outline: thin solid">

na którymkolwiek rzędzie lubisz. Oto skrzypce .

Oczywiście, jak wspominali ludzie, możesz to zrobić za pomocą identyfikatora, klasy lub w inny sposób, jeśli chcesz.

takendarkk
źródło
2
<tr> powinien być kontenerem, a nie elementem, więc formatowanie jego dziecka za pomocą jego stylu nie jest poprawne pod względem semantyki, nawet jeśli działa.
Itay Gal
1
Google Chrome i Internet Explorer pokazują obramowanie wokół, <tr>ale Mozilla Fire Fox nie wyświetla obramowania.
Mały
Spróbuj użyć outlinezamiast border. To powinno naprawić kompatybilność. Mam tylko bankomat Chrome, więc nie mogę go przetestować.
takendarkk
4
Kontur nie jest obramowaniem.
Jukka K. Korpela
2
Całkowicie zrozumiałe. Ta strona jest o udzielaniu ludziom najlepszych odpowiedzi, a nie moim przedstawicielem :)
takendarkk
16

Tak. Zaktualizowałem moją odpowiedź DEMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

Jeśli chcesz stylizować tylko jedną <tr>, możesz to zrobić za pomocą klasy: Second DEMO

Itay Gal
źródło
Wygląda na to, że Internet Explorer nie lubi last-child(wydaje się, że nie obsługuje).
Mały
@Tiny Którą wersję IE chcesz wspierać? Wersja 9+ obsługuje pierwsze dziecko i ostatnie dziecko.
Itay Gal
To Internet Explorer 8, ale nie martw się tym zbytnio :)
Malutki
Nie stylizujesz <tr>, stylizujesz <td>.
Robert Siemer,
5

Skorzystaj z klas CSS:

tr.border{
    outline: thin solid;
}

i używaj go jak:

<tr class="border">...</tr>
Fanie Reynders
źródło
2

Możesz użyć właściwości box-shadow w elemencie tr jako substytutu dla obramowania. Dodatkowo każda właściwość border-radius tego samego elementu będzie miała również zastosowanie do cienia ramki.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
Richard Bonneau
źródło
Zapewnia to znacznie większą kontrolę nad stylizacją niż to outlinema miejsce. Powinna być wyższa odpowiedź.
Jacob Stamm
1

Lewa komórka:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

komórki środkowe:

style="border-style:solid;border-width: 1px 0px 1px 0px;"

prawa komórka:

style="border-style:solid;border-width: 1px 1px 1px 0px;"
Juergen
źródło
0

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Malik
źródło
Czy mógłbyś dodać komentarz do swojej odpowiedzi i wyjaśnić, co zmieniłeś?
franiis
0

dodanie odstępów między obramowaniami: 0rem 0,5rem; tworzy przestrzeń dla każdej komórki (td, th) na dole, nie pozostawiając odstępu między komórkami

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }
Wiadomość Akunna
źródło
-2

Po długiej walce z tym doszedłem do wniosku, że spektakularnie prostą odpowiedzią jest po prostu wypełnienie tabeli pustymi komórkami, aby dopełnić każdy wiersz tabeli taką samą liczbą komórek (oczywiście biorąc pod uwagę colspan). Dzięki komputerowo generowanemu kodowi HTML jest to bardzo proste do zaaranżowania i pozwala uniknąć skomplikowanych obejść. Poniższa ilustracja:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>
David Crowe
źródło