Я пытаюсь выяснить, как добавить границу только внутри таблицы. Когда я делаю:
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;
}
html
css
html-table
border
Ричард Кноп
источник
источник
Ответы:
Если вы делаете то, что, как я считаю, вы пытаетесь сделать, вам понадобится что-то более похожее на это:
jsFiddle Demo
Проблема заключается в том, что вы устанавливаете «полную рамку» вокруг всех ячеек, что создает видимость, как будто у вас есть рамка вокруг всей таблицы.
Приветствия.
РЕДАКТИРОВАТЬ: немного больше информации об этих псевдоклассах можно найти в quirksmode , и, как и следовало ожидать, вы в значительной степени SOL с точки зрения поддержки IE.
источник
это работает для меня:
посмотреть пример ...
протестирован в FF 3.6 и Chromium 5.0, IE не поддерживает; из W3C :
источник
Пример очень простого для вас способа достижения желаемого эффекта:
источник
frame
иrules
являются СТАРЫМИ (не HTML5)table
атрибутами (вместо этого следует использовать CSS).frame
говорит, какие части внешних границ таблицы должны быть видны -void
значит скрывать все внешние границы ...rules
говорит, какие части внутренних границ таблицы должны быть видны -all
означает все их ... очевидно ... Пожалуйста, не используйте это, если вы фанатичны HTML3 ... :)Из-за совместимости mantain с ie7, ie8 я предлагаю использовать first-child, а не last-child, для этого:
Вы можете узнать о псевдоклассах CSS 2.1 по адресу: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
источник
Для обычной разметки таблиц, вот краткое решение, которое работает на всех устройствах / браузерах в BrowserStack, кроме IE 7 и ниже:
Для поддержки IE 7 добавьте это:
Тестовый пример можно увидеть здесь: http://codepen.io/dalgard/pen/wmcdE
источник
это должно работать:
редактировать:
Я только что попробовал, нет границы стола. но если я установлю границу таблицы, это будет устранено с помощью границы.
это тестовый файл:
источник
это будет делать все без CSS
<TABLE BORDER=1 RULES=ALL FRAME=VOID>
код из: HTML- код учебник
источник
Добавьте границу к каждой ячейке с этим:
Удалите верхнюю границу со всех ячеек в первом ряду:
Удалите левую границу из ячеек в первом столбце:
Удалите правую границу из ячеек в последнем столбце:
Удалите нижнюю границу из ячеек в последнем ряду:
http://jsfiddle.net/hzru0ytx/
источник
Работает для любой комбинации tbody / thead / tfoot и td / th
источник