Как я могу применить границу только внутри таблицы?

ProgramBox

Как я могу применить границу только внутри таблицы?

Post author:admin
Запись опубликована:20 мая, 2023
Post category:Вопросы по программированию

#html #css #html-table

#HTML #css #html-таблица #граница

Вопрос:

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

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

1. Я вижу только границы только вокруг ячеек. Поскольку каждая из ячеек имеет границу, создается впечатление, что таблица имеет границу. Возможно, я не понял вопроса?

2. Также называется внутренними границами .

Ответ №1:

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

 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

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

РЕДАКТИРОВАТЬ: Немного больше информации об этих псевдоклассах можно найти на quirksmode, и, как и следовало ожидать, вы в значительной степени профессионал в плане поддержки IE.

1. С простыми таблицами, подобными этой, существует гораздо более короткое решение, которое позволяет избежать использования псевдоклассов, используя комбинатор next sibling. Смотрите мой ответ.

2. @theIV, поскольку на этот вопрос был дан ответ более 5 лет назад, есть ли какой-либо «новый» / «более эффективный» способ сделать это?

3. Не работает, если вы когда-либо используете rowspan для первого столбца в таблице.

Ответ №2:

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

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

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

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

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

Границы с ‘border-style’ ‘hidden’ имеют приоритет над всеми другими конфликтующими границами. Любая граница с этим значением подавляет все границы в этом местоположении.

Ответ №3:

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

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

1.ОБЪЯСНЕНО «ВОЛШЕБСТВО»: frame и rules являются старыми (не HTML5) table атрибутами (вместо этого вы должны использовать CSS). frame указывает, какие части внешних границ таблицы должны быть видны — void означает скрыть все внешние границы… rules указывает, какие части внутренних границ таблицы должны быть видны — all означает все из них … очевидно… Пожалуйста, не используйте это, если вы не фанатик HTML3 … 🙂

2. Добавление чего-то вроде границы: сплошной черный размер 1 пиксель гарантирует, что внешняя граница таблицы получит границу.

3. В 2020 году это сработало как по волшебству, быстро добавив некоторую читабельность таблице с нелепыми интервалами на веб-сайте, который я читал. На самом деле, только этого было достаточно для внутренних границ: rules=»all»

Ответ №4:

Для обычной разметки таблицы вот краткое решение, которое работает на всех устройствах / браузерах в 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

1. Отлично — поскольку это также позволяет установить другую границу для таблицы, а не просто не отображать ее.

2. Это действительно очень умно, и к тому же так коротко. Мне это очень нравится.

Ответ №5:

Из-за совместимости 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 (VS.85).aspx

1. Это отличное решение. Но будьте осторожны, если у вас есть другая таблица в одной из ячеек вашей таблицы и вы хотите увидеть внутренние границы, вам понадобится другой набор строк CSS для вашей «внутренней» таблицы

Ответ №6:

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

 table {
 border:0;
}

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

Редактировать:

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

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

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

Ответ №7:

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

код из: УЧЕБНОЕ ПОСОБИЕ По HTML-КОДИРОВАНИЮ

Ответ №8:

Работает для любой комбинации tbody / thead / tfoot и 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>

Ответ №9:

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

 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/

Ответ №10:

Это должно сработать:

HTML:

 <table frame="void" rules="all">

CSS — файл:

 td, th {
    border: 1px solid red;
}