Jak określić dolną granicę <tr>?

36

Wypróbuj następujące zamiast:

<html> 
<head> 
    <title>Table row styling</title> 
    <style type="text/css"> 
    .bb td, .bb th { 
    border-bottom: 1px solid black !important; 
    } 
    </style> 
</head> 
<body> 
    <table> 
    <tr class="bb"> 
     <td>This</td> 
     <td>should</td> 
     <td>work</td> 
    </tr> 
    </table> 
</body> 
</html>

Źródło

2009-09-06 03:53:27

+0

Dziękuję za odpowiedź.Ale to nie działa. – omg

+0

Stoję poprawione: spróbuj border-bottom: 1px solid black; zamiast. –

+0

Nadal nie działa. – omg

6

Należy zdefiniować styl na elemencie td tak:

<html> 
<head> 
    <style type="text/css"> 
     .bb 
     { 
      border-bottom: solid 1px black; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td> 
       Test 1 
      </td> 
     </tr> 
     <tr> 
      <td class="bb"> 
       Test 2 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

Źródło

2009-09-06 04:03:08

+0

dlaczego nie można modyfikować tr bezpośrednio? – omg

+1

jako ** deceze ** said: "Nie można ustawić stylu , ponieważ jest to tylko" logiczny element grupujący ", ale nie jest on faktycznie renderowany. Można tylko stylizować elementy lub wewnątrz . Mieć trochę." –

+3

To jest dobre podejście. Jedyne, na co chciałbym przestrzec, to to, że rozmiar renderingu html wzrośnie proporcjonalnie do liczby elementów TD w tabeli do klasy. Jeśli rozmiar jest problemem, będziemy bardziej efektywni, celując w sam element tabeli a la table # idForTable tr td {border-bottom: 1px solid black}. Jedna klauzula dla całego zestawu wierszy. –

22

Dodaj border-collapse:collapse do stołu.

Przykład:

table.myTable{ 
    border-collapse:collapse; 
} 

table.myTable tr{ 
    border:1px solid red; 
}

Ten pracował dla mnie.

Źródło

2014-01-12 09:29:09

+4

To powinna być zaakceptowana odpowiedź. Umieszczenie granicy na komórkach tabeli powoduje jej pęknięcie. –

+0

Tak jak wcześniej wspomniano, to naprawdę powinna być zaakceptowana odpowiedź. Dodanie elementów do twojego stołu nie zrobi tego, co myślisz. To znaczy, jeśli nie chcesz dodawać więcej html do swojej strony i przerabiać swoje tabele ... to najprostsze rozwiązania, jakie do tej pory widziałem. – greaterKing

1

tr td 
{ 
    border-bottom: 2px solid silver; 
}

lub jeśli chcesz granicę wewnątrz znacznika TR, można to zrobić:

tr td { 
    box-shadow: inset 0px -2px 0px silver; 
}

Źródło

2014-01-23 22:16:14

1

Co chcę powiedzieć tutaj jest jak jakiś dodatek na odpowiedź @Suciu Lucjana.

Dziwna sytuacja, na którą natrafiłem, polega na tym, że gdy zastosuję rozwiązanie @Suciu Lucian w moim pliku, działa on w przeglądarce Chrome, ale nie w Safari (i nie próbował w Firefoksie). Po studiowałem guide of styling table border publikowanych przez w3.org, znalazłem coś alternatywę:

table.myTable{ 
    border-spacing: 0; 
} 

table.myTable td{ 
    border-bottom:1px solid red; 
}

Tak trzeba projektować z td zamiast tr.

Źródło

2016-04-28 07:08:46 Halt

Jak określić dolną granicę <tr>?

Odpowiedz

Powiązane problemy