Как полностью удалить границы таблицы HTML
моя цель-сделать HTML-страницу, похожую на"фоторамку". Другими словами, Я хочу сделать пустую страницу, которая окружена 4 картинками.
Это мой код:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
и классы CSS следующие:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
моя проблема в том, что я получаю тонкие белые линии между ячейками таблицы, я имею в виду, что граница изображений не непрерывна. Как мне избежать этих пробелов?
6 ответов
<table cellspacing="0" cellpadding="0">
и в css:
table {border: none;}
EDIT: Как отметил iGEL, это решение официально устарело (все еще работает), поэтому, если вы начинаете с нуля, вы должны пойти с решением пограничного коллапса jnpcl.
мне на самом деле очень не нравится это изменение до сих пор (не работают с таблицами, что часто). Это усложняет некоторые задачи. Е. Г. когда вы хотите включить две разные границы в одном месте (визуально), а один сверху один ряд, а второй снизу для другого ряда. Они рухнут (= будет показан только один из них). Затем вам нужно изучить, как рассчитывается "приоритет" границы и какие стили границы "сильнее" (double vs solid и т. д.).
мне это понравилось:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
теперь, с крахом границы, это не будет работать, так как всегда одна граница удалена. Я должен сделать это каким-то другим способом (есть несколько решений, ОФК). Одна из возможностей-использование CSS3 с box-shadow:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
вы также можете использовать что-то вроде "groove|ridge|inset|outset" стиль границы только с одной границей. Но для меня это не оптимально, потому что я не могу контролировать оба цвета.
может быть, есть какое-то простое и хорошее решение для коллапса границ, но я еще не видел его, и я честно не потратил на него много времени. Может быть, кто-то здесь сможет показать мне/нам ;)
в среде начальной загрузки ни один из лучших ответов не помог, но применив следующие удаленные все границы:
.noBorder {
border:none !important;
}
применяется как:
<td class="noBorder">
для меня, мне нужно сделать нечто подобное, чтобы полностью удалить границы таблицы и ячеек. Это не требует изменения HTML вообще, что было полезно в моем случае.
table, tr, td {
border: none;
}
в среде начальной загрузки вот мое решение:
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
Это то, что решило проблему для меня:
в теге HTML tr добавьте следующее:
style="border-collapse: collapse; border: none;"
это удалило все границы, которые показывались в строке таблицы.