Dodaj obramowanie dołu do wiersza tabeli <tr>


385

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.


Na marginesie: jeśli styl wstawiania (pierwszy przykład w pytaniu) nie działa, jest mało prawdopodobne, że styl osadzony (drugi przykład) będzie działał. Powinieneś także sprawdzić dostępność atrybutów dla elementu, który próbujesz stylizować: w3.org/TR/html-markup/tr.html
Tass

Jeśli chcesz mieć dolne obramowanie dla tabeli tr, możesz śledzić ten jsfiddle.net/7awN4
AllenC

6
Notatka zachęcająca przyszłych poszukiwaczy do przewijania w dół do odpowiedzi @ Natana Manousosa poniżej - prawdopodobnie jest to rozwiązanie, którego szukasz
henry

Odpowiedzi:


400

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

27
Zauważ, że korzystając z tego rozwiązania najprawdopodobniej będziesz mieć przerwę na granicy między td. Odpowiedź simoncereski rozwiązuje ten problem, ale należy pamiętać, że może nie wyglądać ładnie z kropkowanymi lub przerywanymi
ramkami

24
Możesz również temu zaradzić, dodając cellspacing="0"jako atrybut do <table>(patrz to pytanie ). Nie wiem jednak, jak to będzie wyglądać z kropkowanymi lub przerywanymi ramkami.
Stefan van den Akker

5
trmoże mieć stylizację obramowania w składanym modelu obramowania. @Sangram, rozważ zaakceptowanie odpowiedzi, która bierze to pod uwagę zamiast tej, nie?
Robert Siemer

To nie zadziała, jeśli między komórkami tabeli będzie padding. Jeśli jest wypełnienie, wówczas ramka zostanie widocznie podzielona na części.
Timothy Gonzalez

i twój stół potrzebuje tego stylu <table style = "border-collapse: collapse">
Oguz

510

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

table { 
    border-collapse: collapse; 
}

Połączyć


2
To nie działa samo z siebie. Nadal nie możesz stylizować wiersza, ale możesz stylizować komórki.
Renan

49
Mylisz się, @Renan. Model zwijanego obramowania jest dokładnie tym, co powoduje, że granice wierszy mogą być kształtowane. Zgodnie z sekcją CSS 17.6 : W osobnym modelu granic „Wiersze [...] nie mogą mieć granic (tzn. Aplikacje klienckie muszą ignorować właściwości granic dla tych elementów).” „W modelu zwijanego obramowania można określić granice, które otaczają całą lub część komórki, wiersza [i] grupy wierszy [...]” A tak przy okazji: działa w mojej przeglądarce (Chromium 37).
Robert Siemer

12
Myślę, że niektórzy ludzie mogą się mylić (tak jak ja) i nie zauważają, że styl zwijania granic należy ustawić na stole, a nie w wierszu.
Porlune

Wygląda na to, że Chrome nie ma tej funkcji, chociaż obsługuje inne funkcje zwijania granic.
Liqun niedz.

72

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


6
ustawianie granicy na tr jest bezużyteczne nawet przy zwiniętej ramce. musisz ustawić go na tds tr
Radu Simionescu,

9
@RaduSimionescu Źle, działa idealnie dobrze na trzwiniętej ramce .
Styphon,

Brak efektu w FF 45.0.1.
imrek 20.04.16

41

Posługiwać się

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

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


Tak też bym to zrobił! Dodaj obramowanie na td i użyj zwinięcia obramowania na stole
Sayan

30

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

8

Posługiwać się

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

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


7

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

11
Nie jest dobrym pomysłem , aby zestawdisplay: blockdlatrtych. Zamiast tegoużyjtr td { border-bottom: ... }reklamytr.oddrow td { border-bottom: ... }
vladr

4
blok wyświetlania może zniszczyć układ tabeli. border-collapse: zwinięcie samej tabeli jest zdecydowanie najlepszym rozwiązaniem
N4ppeL

7

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

6

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.

Bez Border CSS ex.

Zdjęcie na żywo nie ma granicy

Zdjęcie na żywo nie ma granicy

CSS Border ex.

CSS Border ex.

Tabela ze zdjęciem na żywo na granicy

Tabela ze zdjęciem na żywo na granicy


2

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

2

<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


2

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>


1

Brak dolnej krawędzi CSS:

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

0

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'>

nie możesz umieścić granicy na tr. Edytowana odpowiedź w celu wyjaśnienia tego.
Decko

To najprostsza i najdokładniejsza odpowiedź.
JamesC

-3

HTML

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

CSS

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

2
bezużyteczne bez zawalenia granicy: zawalenie;
m1crdy
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.