Niejednolita kreska przerywana w komórkach tabeli

Question

Zastosowałem CSS border-bottom:1px dashed #494949; w kilku kolejnych komórkach w jednym wierszu tabeli HTML, ale granica nie jest jednolita. Kreski na końcu każdej komórki pojawiają się trochę dłużej. Kropkowana granica również nie jest jednolita. Jestem również za pomocą border-collapse:collapse;

Oto zrzut ekranu:

Czy jest jakiś sposób mogę uzyskać jednolite przerywana granicę?

Answer 1

Przeglądarki mają niepoprawne renderowania granic przerywane. Możesz walczyć z nimi, usuwając odstępy między komórkami i dopełnianie komórek oraz ustawiając granicę na elemencie tr, a nie na komórkach, np.

table { border-collapse: collapse; } 
td { padding: 0; } 
tr { border-bottom:1px dashed #494949; } 

Ale nadal wydaje się nie działać na IE 9 (na skrzyżowaniach komórkowych), a stare przeglądarki ignorują granice ustawione w wierszach tabeli.

Zamiast tego należy użyć jednolitego szarego obramowania. Działa konsekwentnie i może być wizualnie akceptowalny, a może nawet lepszy.

Answer 2

Trudno powiedzieć na pewno, co się dzieje bez zrzutu ekranu lub wersji demonstracyjnej, ale wydaje się, że wydaje się, że są dłuższe przy przejściu do następnej komórki, ponieważ ostatnia kreska dotyka pierwszego myślnika w następnej komórce.

W takim przypadku spróbuj umieścić obramowanie na całym wierszu zamiast na poszczególnych komórkach.

Answer 3

Nie jestem pewien, ale wygląda na to, że problem z renderowaniem. Nawet użycie obrazu tła zamiast obramowania-dołu będzie miało ten sam rodzaj problemu.

Answer 4

Najlepszym rozwiązaniem w tym przypadku jest utworzenie pliku powtarzalnego obrazu, którego wysokość jest wysokością wiersza tabeli. Ustaw go jako tło tabeli i upewnij się, że się powtarza. Przetestowałem to i działa. Zauważ, że w pliku PNG utworzonym dla tego przykładu kreski mają długość 3px, a po prawej są trzy puste, końcowe piksele, dla końcowych wymiarów 30px (szerokość) x 29px (wysokość).

Oto kod:

.borderTable { 
 
    background: url(http://www.windycitywebsites.com/wp-content/uploads/2012/03/dash_png.png); 
 
    background-repeat: repeat; 
 
} 
 

 
.borderTable td { 
 
    height: 29px; 
 
}

<table class="borderTable" width="350" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr class="stuff"> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr class="stuff"> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
</table>