CSS-граница только внутри таблицы

Я пытаюсь выяснить, как добавить границу только внутри таблицы. Когда я это делаю:



table {

    border: 0;

}

table td, table th {

    border: 1px solid black;

}


граница проходит вокруг всей таблицы, а также между ячейками таблицы. То, что я хочу достичь, - это иметь границу только внутри таблицы вокруг ячеек таблицы (без внешней границы вокруг таблицы).



вот разметку я использую для таблиц (хотя я думаю, что это не важно):



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


и вот некоторые основные стили я применяю к большинству моих таблицы:



table {

    border-collapse: collapse;

    border-spacing: 0;

}
694   8  

8 ответов:

Если вы делаете то, что я считаю, что вы пытаетесь сделать, вам потребуется что-то немного больше, как это:

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

проблема в том, что вы устанавливаете полной границы вокруг всех ячеек, которые делают его выглядеть так, как будто у вас рамку вокруг всей таблицы.

Ура.

EDIT: немного больше информации об этих псевдоклассах можно найти на quirksmode, и, как и следовало ожидать, вы в значительной степени S. O. L. с точки зрения поддержки IE.

179  
2015-10-13 18:34:06

это работает для меня:

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

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

посмотреть пример ...

протестировано в FF 3.6 и Chromium 5.0, т. е. не хватает поддержки; от W3C:

границы с "пограничным стилем ""скрытого" имеют приоритет над всеми другими конфликтующими границами. Любая граница с этим значением подавляет все границы в этом местоположении.

175  
2012-08-01 21:55:14

очень простой способ для вас, чтобы достичь желаемого эффекта:

<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>
38  
2015-06-20 15:01:32

из-за совместимости mantain с ie7, ie8 я предлагаю использовать first-child, а не last-child для этого:

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;}

вы можете узнать о Псевдоклассах CSS 2.1 по адресу: http://msdn.microsoft.com/en-us/library/cc351024(против.85).аспн

11  
2015-02-04 00:09:37

для обычной разметки таблицы, вот короткое решение, которое работает на всех устройствах / браузерах на BrowserStack, кроме IE 7 и ниже:

table { border-collapse: collapse; }

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

для поддержки IE 7, Добавьте это:

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

тестовый случай можно увидеть здесь:http://codepen.io/dalgard/pen/wmcdE

10  
2014-08-31 15:14:08

это должно работать:

table {
 border:0;
}

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

edit:

Я просто попробовал, нет границы таблицы. но если я устанавливаю границу таблицы, она устраняется границей-коллапсом.

это тестовый файл:

<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>
5  
2009-08-11 01:05:10

что будет делать все это без CSS <TABLE BORDER=1 RULES=ALL FRAME=VOID>

код: HTML-КОД УЧЕБНИК

3  
2012-11-08 22:29:39

добавить границу к каждой ячейке с этим:

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

Удалите верхнюю границу из всех ячеек в первой строке:

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

удалите левую границу из ячеек в первом столбце:

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

удалите правую границу из ячеек в последнем столбце:

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

удалите нижнюю границу из ячеек в последней строке:

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

http://jsfiddle.net/hzru0ytx/

0  
2015-01-06 21:19:15

Comments

    Ничего не найдено.
Click here to cancel reply.