Как полностью удалить границы из таблицы 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');       
}

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

Brian Tompsett - 汤莱恩
Редактировал вопрос 7-го ноября 2017 в 10:07
Программирование
html css html-table background-image
16-го апреля 2011 в 2:39
19 просмотров
Решение
<table cellspacing="0" cellpadding="0">

И в css:

table {border: none;}

ЭДИТ:. Как отметил iGEL, это решение официально устарело (хотя все еще работает), так что если вы начинаете с нуля, вам следует использовать решение jnpcl's border-collapse.

На самом деле мне пока что не нравится это изменение (я не так часто работаю с таблицами). Оно делает некоторые задачи немного сложнее. Например, когда вы хотите включить две разные границы в одном и том же месте (визуально), при этом одна будет TOP для одной строки, а вторая BOTTOM для другой. Они схлопнутся (= будет показана только одна из них). Затем необходимо изучить, как рассчитывается "приоритет" границы и какие стили границ являются "более сильными" (двойные против сплошных и т.д.).

У меня получилось вот так:

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


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

Вы также можете использовать что-то вроде "groove|ridge|inset|outset" стиля границы с одной границей. Но для меня это не оптимально, потому что я не могу контролировать оба цвета.

Возможно, есть какое-то простое и хорошее решение для сворачивания границ, но я его пока не видел и, честно говоря, не тратил на это много времени. Может быть, кто-то здесь сможет показать мне/нам ;)

Damb
Редактировал ответ 25-го ноября 2012 в 9:31
Комментарии (2)

Мне нужно было сделать что-то вроде этого, чтобы полностью удалить границы из таблицы и всех ячеек. Это не требует изменения HTML, что было полезно в моем случае.

table, tr, td {
    border: none;
}
Комментарии (1)

В Bootstrap-среда не лучшие ответы помогли, но применив следующие удалены все границы: 

.noBorder {
    border:none !important;
}

Применяется в качестве: 

<td class="noBorder">
Gökhan Kurt
Редактировал ответ 12-го ноября 2016 в 10:30
Комментарии (1)

В Bootstrap-среда вот мое решение:

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>
Комментарии (0)

Это то, что решена проблема для меня:

В ваш HTML-тег тр, добавьте это: 

style="border-collapse: collapse; border: none;"

Что убрали все границы, которые были показаны по строке таблицы.

Igor
Редактировал ответ 8-го февраля 2017 в 9:27
Комментарии (1)