CSS-Border tylko wewnątrz tabeli
Próbuję dowiedzieć się, jak dodać obramowanie tylko wewnątrz tabeli. Kiedy robię:
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
Obramowanie jest wokół całej tabeli, a także między komórkami tabeli. To, co chcę osiągnąć, to mieć obramowanie tylko wewnątrz tabeli wokół komórek tabeli (bez zewnętrznej obramowania wokół tabeli).
Oto znaczniki, których używam do tabel (chociaż 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>
A oto kilka podstawowych stylów, które stosuję do większości moich tabel:
table {
border-collapse: collapse;
border-spacing: 0;
}
8 answers
Jeśli robisz to, co wierzę, że próbujesz zrobić, będziesz potrzebował czegoś bardziej podobnego:
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;
}
Problem polega na tym, że ustawiasz "pełną obramowanie" wokół wszystkich komórek, co sprawia, że wygląda to tak, jakbyś miał obramowanie wokół całej tabeli.
Zdrówko.EDIT: trochę więcej informacji na temat tych pseudo-klas można znaleźć na quirksmode , i, jak można się spodziewać, jesteś w zasadzie S. O. L. pod względem IE wsparcie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-13 15:34:06
To działa dla mnie:
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
}
Testowane w FF 3.6 i Chromium 5.0, IE brak wsparcia; z W3C:
Granice z 'border-style' z 'hidden' mają pierwszeństwo przed wszystkimi innymi konfliktowymi granicami. Każda obramowanie o tej wartości usuwa wszystkie obramowania w tej lokalizacji.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-01 18:55:14
Przykład Bardzo Prosty sposób 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-20 12:01:32
Ze względu na kompatybilność z ie7, ie8 sugeruję użycie first-child a nie last-child aby to zrobić:
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: http://msdn.microsoft.com/en-us/library/cc351024 (VS.85). aspx
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-03 22:09:37
Dla zwykłych znaczników tabeli, oto krótkie rozwiązanie, które działa na wszystkich urządzeniach / przeglądarkach na BrowserStack, z wyjątkiem IE 7 i poniżej:
table { border-collapse: collapse; }
td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }
Dla obsługi 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-31 12:14:08
To powinno zadziałać:
table {
border:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}
Edit:
Właśnie próbowałem, bez obramowania tabeli. ale jeśli ustawiłem obramowanie tabeli, zostanie ono wyeliminowane przez obramowanie-collapse.
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-08-10 22:05:10
That will do it all without css
<TABLE BORDER=1 RULES=ALL FRAME=VOID>
Code from: HTML CODE TUTORIAL
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-08 20:29:39
Dodaj obramowanie do każdej komórki za pomocą tego:
table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }
Usuń górną granicę ze wszystkich komórek w pierwszym rzędzie:
table > tbody > tr:first-child > td { border-top: 0; }
Usuń lewą obramowanie z komórek w pierwszej kolumnie:
table > tbody > tr > td:first-child { border-left: 0; }
Usuń prawą obramowanie z komórek w ostatniej kolumnie:
table > tbody > tr > td:last-child { border-right: 0; }
Usuń dolną granicę z komórek w ostatnim wierszu:
table > tbody > tr:last-child > td { border-bottom: 0; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-06 19:19:15