Dodaj obramowanie dołu do wiersza tabeli <tr>

Mam tabelę 3 na 3. Potrzebuję sposobu, aby dodać obramowanie do dolnej części każdego wiersza tri nadać mu określony kolor.

Najpierw próbowałem bezpośrednio, tj .:

<tr style="border-bottom:1pt solid black;">

Ale to nie zadziałało. Dodałem więc CSS w ten sposób:

tr {
border-bottom: 1pt solid black;
}

To wciąż nie działało.

Wolałbym używać CSS, ponieważ wtedy nie muszę dodawać styleatrybutu do każdego wiersza. Nie dodałem borderatrybutu do <table>. Mam nadzieję, że nie wpływa to na mój CSS.

Miałem wcześniej taki problem. Nie sądzę, że trmogę bezpośrednio nadać styl graniczny. Moim obejściem było stylizowanie tds w rzędzie:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Dodaj border-collapse:collapsedo swojej reguły tabeli:

table { 
    border-collapse: collapse; 
}

Połączyć

Użyj border-collapse:collapsena stole i border-bottom: 1pt solid black;na tr

Posługiwać się

border-collapse:collapse jak napisał Nathan i musisz ustawić

td { border-bottom: 1px solid #000; }

Tutaj jest wiele niekompletnych odpowiedzi. Ponieważ nie można zastosować obramowania do trznacznika, należy zastosować go do znaczników tdlub w następujący thsposób:

td {
  border-bottom: 1pt solid black;
}

Spowoduje to pozostawienie niewielkiej przestrzeni między nimi td, co prawdopodobnie nie jest pożądane, jeśli chcesz, aby obramowanie wyglądało tak, jakby był trznacznikiem. Aby „wypełnić luki”, że tak powiem, musisz użyć border-collapsewłaściwości tableelementu i ustawić jego wartość na collapse:

table {
  border-collapse: collapse;
}

Posługiwać się

table{border-collapse:collapse}
tr{border-top:thin solid}

Zamień „cienką bryłę” na właściwości CSS.

Wyświetl wiersz jako blok.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

i aby wyświetlić alternatywne kolory po prostu:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Możesz użyć tej box-shadowwłaściwości do sfałszowania granicy trelementu. Dostosuj pozycję Y box-shadow(poniżej przedstawioną jako 2px), aby dostosować grubość.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Próbowałem dodać

    table {
      border-collapse: collapse;
    }   

obok

    tr {
      bottom-border: 2pt solid #color;
    }

a następnie skomentował upadek granicy, aby zobaczyć, co zadziałało. Praca z selektorem tr z dolną krawędzią działała dla mnie!

Bez Border CSS ex.

Zdjęcie na żywo nie ma granicy

CSS Border ex.

Tabela ze zdjęciem na żywo na granicy

Za pomocą tej metody odkryłem, że przestrzeń między elementami td spowodowała powstanie szczeliny na granicy, ale nie boję się ...

Można to obejść w jeden sposób:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

Z CSS:

td.end{
    border:2px solid black;
}

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

To samo możesz zrobić dla całego wiersza.

Jest border-bottom-style, border-top-style, border-left-style, border-right-style. Lub po prostu border-styledotyczy to wszystkich czterech granic jednocześnie.

Możesz zobaczyć (i WYPRÓBOWAĆ SIEBIE online) więcej szczegółów tutaj

Kilka interesujących odpowiedzi. Ponieważ chcesz po prostu obramowania u dołu (lub u góry), oto jeszcze dwa. Zakładając, że chcesz niebieską ramkę o grubości 3px. W sekcji stylu możesz dodać

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

W kodzie tabeli albo

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Innym rozwiązaniem tego jest border-spacingwłaściwość:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Brak dolnej krawędzi CSS:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Nie można umieścić ramki na elemencie tr. Działa to dla mnie w Firefoxie i IE 11:

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}