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;
}
html css html-table border 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

Odpowiedzi:

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,
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