Jak mogę zastosować obramowanie tylko wewnątrz stołu?

195

Próbuję wymyślić, jak dodać obramowanie tylko wewnątrz tabeli. Kiedy robię:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

Obramowanie znajduje się wokół całej tabeli, a także między komórkami tabeli. Chcę osiągnąć granicę tylko wewnątrz tabeli wokół komórek tabeli (bez zewnętrznej granicy wokół tabeli).

Oto znaczniki, których używam do tabel (choć myślę, że to nie jest ważne):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

Oto kilka podstawowych stylów, które stosuję do większości moich stołów:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

— Richard Knop
źródło

Widzę tylko granice tylko wokół komórek. Ponieważ każda z komórek ma ramkę, wygląda na to, że tabela ma ramkę. Może nie dostaję pytania?

— Chetan S,

3

Nazywane również granicami wewnętrznymi .

— Ślimak mechaniczny

203

Jeśli robisz to, co, jak sądzę, próbujesz zrobić, będziesz potrzebować czegoś więcej:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle Demo

Problem polega na tym, że ustawiasz „pełną ramkę” wokół wszystkich komórek, co sprawia, że wydaje się, że masz ramkę wokół całej tabeli.

Twoje zdrowie.

EDYCJA: Trochę więcej informacji na temat tych pseudoklas można znaleźć w trybie quirksmode i, jak można się spodziewać, jesteś w dużej mierze SOL pod względem obsługi IE.

— theIV
źródło

Przy takich prostych tabelach istnieje o wiele krótsze rozwiązanie, które pozwala uniknąć korzystania z pseudoklas za pomocą następnego kombinatora rodzeństwa. Zobacz moją odpowiedź.

— dalgard

1

@theIV, z odpowiedzią na to ponad 5 lat temu, czy istnieje jakiś „nowy” / „bardziej wydajny” sposób na to?

— jbutler483

Nie działa, jeśli kiedykolwiek użyjesz zakresu wierszy w pierwszej kolumnie w tabeli.

— Jack

192

to działa dla mnie:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

zobacz przykład ...

testowany w FF 3.6 i Chromium 5.0, IE nie ma wsparcia; z W3C :

Granice z „stylem granicy” „ukrytego” mają pierwszeństwo przed wszystkimi innymi granicami będącymi w konflikcie. Każda granica z tą wartością pomija wszystkie granice w tym miejscu.

— anthonyrisinger
źródło

1

Tak długo, jak nie potrzebujesz obramowania stołu, jest to zdecydowanie najbardziej eleganckie rozwiązanie.

— cjroth

42

Przykład bardzo prostego sposobu na osiągnięcie pożądanego efektu:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

— jony
źródło

13

WYJAŚNIENIE „MAGIA”: frame i rulessą atrybutami STARYMI (nie HTML5) table (zamiast tego należy użyć CSS). framemówi, które części zewnętrznych granic stołu powinny być widoczne - voidoznacza ukryć wszystkie zewnętrzne granice stołu ... rulesmówi, które części wewnętrznych granic stołu powinny być widoczne - alloznacza wszystkie ... oczywiście ... Nie używaj tego, chyba że są fanatykami HTML3 ... :)

— jave.web

1

Dodanie czegoś w rodzaju obramowania: jednolity czarny 1px sprawi, że zewnętrzna krawędź stołu uzyska obramowanie.

— Aaron Liu

1

W 2020 roku zadziałało jak urok, aby szybko dodać czytelności do absurdalnie rozstawionego stołu na stronie, którą czytałem. Właściwie to wystarczyło na granice wewnętrzne: rules = "all"

— Edoardo Facchinelli

11

Ze względu na kompatybilność mantain z ie7, ie8 sugeruję używanie do tego pierwszego dziecka, a nie ostatniego dziecka:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

Możesz dowiedzieć się o pseudoklasach CSS 2.1 na stronie: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

— Crisboot
źródło

To świetne rozwiązanie. Ale uważaj, jeśli masz inny stolik w jednej z komórek tabeli i chcemy zobaczyć wewnętrzne granice musisz inny zestaw wierszy CSS dla „wewnętrzny” stole

— Michael Biermann

10

W przypadku zwykłego znaczników tabel, oto krótkie rozwiązanie, które działa na wszystkich urządzeniach / przeglądarkach BrowserStack, z wyjątkiem IE 7 i niższych:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Aby uzyskać obsługę IE 7, dodaj to:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

Przypadek testowy można zobaczyć tutaj: http://codepen.io/dalgard/pen/wmcdE

— dalgard
źródło

Świetnie - ponieważ pozwala to również ustawić inną granicę dla tabeli, bardziej niż nie wyświetlać jej.

— jsbueno

5

to powinno działać:

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

edytować:

właśnie próbowałem, bez obramowania stołu. ale jeśli ustawię granicę tabeli, zostanie ona wyeliminowana przez zwinięcie granicy.

to jest plik testowy:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

— Rufinus
źródło

Nie, to nie działa. Próbowałem tego. Zmienię swój pierwszy post.

— Richard Knop,

3

to wszystko zrobi bez css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

kod z: TUTORIAL KODU HTML

— TwoFaceZ
źródło

0

Dodaj ramkę do każdej komórki w ten sposób:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Usuń górną ramkę ze wszystkich komórek w pierwszym rzędzie:

table > tbody > tr:first-child > td { border-top: 0; }

Usuń lewą ramkę z komórek w pierwszej kolumnie:

table > tbody > tr > td:first-child { border-left: 0; }

Usuń prawą ramkę z komórek w ostatniej kolumnie:

table > tbody > tr > td:last-child { border-right: 0; }

Usuń dolną ramkę z komórek w ostatnim rzędzie:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

— Brian
źródło

0

Działa dla dowolnej kombinacji tbody / thead / tfoot i td / th

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

Rozwiń fragment kodu

— użytkownik1119279
źródło