Próbuję zaprojektować HTML / CSS, który może umieścić obramowanie wokół określonych wierszy w tabeli. Tak, wiem, że tak naprawdę nie powinienem używać tabel do układu, ale nie znam wystarczającej liczby CSS, aby go całkowicie zastąpić.
W każdym razie mam tabelę z wieloma wierszami i kolumnami, niektóre są połączone za pomocą rowspan i colspan, i chciałbym umieścić prostą ramkę wokół części tabeli. Obecnie używam 4 oddzielnych klas CSS (góra, dół, lewa, prawa), które dołączam do <td>
komórek znajdujących się odpowiednio na górze, na dole, po lewej i prawej stronie tabeli.
.top {
border-top: thin solid;
border-color: black;
}
.bottom {
border-bottom: thin solid;
border-color: black;
}
.left {
border-left: thin solid;
border-color: black;
}
.right {
border-right: thin solid;
border-color: black;
}
<html>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td class="top left">one</td>
<td class="top right">two</td>
</tr>
<tr>
<td class="bottom left">three</td>
<td class="bottom right">four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td class="top bottom left right" colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</html>
Czy jest łatwiejszy sposób na zrobienie tego, co chcę? Próbowałem zastosować górę i dół do a, <tr>
ale to nie zadziałało. (ps Jestem nowy w CSS, więc prawdopodobnie istnieje naprawdę podstawowe rozwiązanie tego problemu, które przegapiłem).
Uwaga: muszę mieć wiele sekcji graniczących. Podstawowym pomysłem jest posiadanie wielu graniczących klastrów, z których każdy zawiera wiele wierszy.
źródło
Odpowiedzi:
A co powiesz
tr {outline: thin solid black;}
? Działa dla mnie na elementach tr lub tbody i wydaje się być kompatybilny z większością przeglądarek, w tym IE 8+, ale nie wcześniej.źródło
Dziękuję wszystkim, którzy odpowiedzieli! Wypróbowałem wszystkie przedstawione tutaj rozwiązania i przeszukiwałem internet w poszukiwaniu innych możliwych rozwiązań i myślę, że znalazłem jedno, które jest obiecujące:
Wynik:
Zamiast dodawać
top
,bottom
,left
orazright
zajęcia dla każdego<td>
, wszystko co musisz zrobić, to dodaćtop row
do góry<tr>
,bottom row
do dołu<tr>
, irow
aby każdy<tr>
w pomiędzy. Czy jest coś nie tak z tym rozwiązaniem? Czy są jakieś problemy z różnymi platformami, o których powinienem wiedzieć?źródło
cellspacing
Atrybut jest przestarzałe w HTML5. Wygląda na to, że CSStable { border-collapse: collapse; border-spacing: 0; }
jest teraz właściwą drogą.Jeśli ustawisz
border-collapse
stylcollapse
na w tabeli nadrzędnej, powinieneś być w stanie nadać styltr
: (style są wbudowane do wersji demonstracyjnej)Wynik:
źródło
Ja też się tym bawiłem i wydawało mi się, że to najlepsza opcja:
Zwróć uwagę, że zapobiegnie to stosowaniu płynnych / automatycznych szerokości kolumn , ponieważ komórki nie będą już wyrównywać się z tymi w innych wierszach, ale formatowanie obramowania / koloru nadal działa poprawnie. Rozwiązaniem jest nadanie TR i TD określonej szerokości (px lub%).
Oczywiście możesz zrobić selektor,
tr.myClass
jeśli chcesz zastosować go tylko do niektórych wierszy. Najwyraźniejdisplay: table
nie działa w IE 6/7, ale prawdopodobnie są inne hacki (hasLayout?), Które mogą działać w tych przypadkach. :-(źródło
Oto podejście wykorzystujące elementy tbody, które mogą być sposobem na zrobienie tego. Nie możesz ustawić obramowania na tbody (tak samo jak na tr), ale możesz ustawić kolor tła. Jeśli efekt, który chcesz osiągnąć, można uzyskać za pomocą koloru tła na grupach wierszy zamiast obramowania, to zadziała.
źródło
Pogrupuj wiersze za pomocą
<tbody>
tagu, a następnie zastosuj styl.A css w style.css
źródło
Jedynym innym sposobem, jaki mogę sobie wyobrazić, jest zawarcie każdego z wierszy, wokół których potrzebujesz ramki, w zagnieżdżonej tabeli. Ułatwi to obramowanie, ale potencjalnie stworzy inne problemy z układem, będziesz musiał ręcznie ustawić szerokość komórek tabeli itp.
Twoje podejście może być najlepsze, w zależności od innych wymagań dotyczących układu, a sugerowane tutaj podejście jest tylko możliwą alternatywą.
źródło
Opierając się na wymaganiu, że chcesz umieścić obramowanie wokół dowolnego bloku komórek MxN, naprawdę nie ma prostszego sposobu na zrobienie tego bez użycia JavaScript. Jeśli twoje komórki są naprawione, możesz użyć pływaków, ale jest to problematyczne z innych powodów. to, co robisz, może być nudne, ale jest w porządku.
Ok, jeśli jesteś zainteresowany rozwiązaniem w Javascript, używając jQuery (moje preferowane podejście), otrzymujesz ten dość przerażający fragment kodu:
Z przyjemnością wysłucham sugestii, jak to zrobić ...
źródło
sztuczka polega na właściwości konturu dzięki odpowiedzi enigmentu z niewielkimi modyfikacjami
użyj tej klasy
następnie w kodzie HTML
a rezultatem jest nadzieja, że to ci pomoże
źródło
Łatwiejszym sposobem jest uczynienie tabeli kontrolką po stronie serwera. Możesz użyć czegoś podobnego do tego:
źródło