Nadanie obramowania wierszowi tabeli HTML, <tr>

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

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>

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.

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

Skorzystaj z klas CSS:

tr.border{
    outline: thin solid;
}

i używaj go jak:

<tr class="border">...</tr>

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);

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;"

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;
    }

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>