css zarys zawsze na pierwszym wierszu tabeli na chromie

Question

Google Chrome, gdy masz zarys na wiersz tabeli je dostać tylko w pierwszym rzędzie

więc za pomocą tego css:

tr { 
     outline:1px solid red; 
    } 

będziesz uzyskać zarys tylko w pierwszym rzędzie, można zobaczyć, że jeśli otworzysz ten link w chrome:

http://jsbin.com/enupey/27/edit

ktoś wie jakiegokolwiek obejścia/poprawkę do tego?

Dziękuję

Answer 1

Choć wydaje się to być błąd, trochę googling i znalazłem roztwór roboczy w ramach this question

dodania:

display: block; 

wydaje się działać:

tr 
{ 
    outline:1px solid red; 
    display: block; 
} 

Edytowany wynik można zobaczyć here

---

I bawił się wokół z CSS nieco więcej i wymyślił to:

td 
{ 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
    bottom-padding:-1px; 
} 

table 
{ 
    border-left:2px solid red; 
    border-right:2px solid red; 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
    bottom-padding:-1px; 
} 

miałoby to być odpowiedni?

Uwaga: testowałem to tylko w Google Chrome na Maca.

Answer 2

The table tag has a rules attribute który pozwala ci określić, gdzie granice są "rządzone" w tabeli. Należy jednak pamiętać, że:

Atrybut rules jest obsługiwany we wszystkich głównych przeglądarkach.

Uwaga: Zasady atrybut nie jest obsługiwany w IE, wcześniejszej wersji 9.

Uwaga: Chrome i Safari wyświetla ten atrybut niepoprawnie: Dodają dotknięte granic poza oprócz wewnętrznych granicach.

Łącząc to z frame attribute i CSS z oryginalnego pytania, to zapewnia zapakowane kontury w każdym wierszu:

<table rules="rows" frame="box"> 

widać tę poprawkę do JSBin here

(Przetestowano na komputerze Mac Chrome)

(Dodałem to jako oddzielną odpowiedź, ponieważ moja poprzednia odpowiedź koncentruje się na CSS, to rozwiązanie, używając tylko HTML wydaje się wystarczająco różne, aby oddzielić odpowiedzi)