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

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

Ответ 1

<table cellspacing="0" cellpadding="0">

И в css:

table {border: none;}

EDIT: Как отметил iGEL, это решение официально устарело (все еще работает), поэтому, если вы начинаете с нуля, вы должны пойти с решением jnpcl border-collapse.

На самом деле я совсем не люблю это изменение (часто не работаю с таблицами). Это усложняет некоторые задачи. Например. когда вы хотите включить две разные границы в одном и том же месте (визуально), а один - TOP для одной строки, а второй - BOTTOM для другой строки. Они рухнут (= будет показан только один из них). Затем вам нужно изучить, как вычисляется граничный "приоритет" и какие стили границы "сильнее" (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;}

Теперь, при обрыве границы, это не сработает, поскольку всегда удаляется одна граница. Я должен сделать это каким-то другим способом (есть больше решений ofc). Одна из возможностей заключается в использовании 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" с одной границей. Но для меня это не оптимально, потому что я не могу контролировать оба цвета.

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

Ответ 2

table {
    border-collapse: collapse;
}

/* remove padding */
td, th {
    padding: 0;
}

Ответ 3

В среде бутстрапа ни один из верхних ответов не помог, но применил следующие удаленные все границы:

.noBorder {
    border:none !important;
}

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

<td class="noBorder">

Ответ 4

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

table, tr, td {
    border: none;
}

Ответ 5

Вот что разрешило проблему для меня:

В тэге HTML тэга добавьте следующее:

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

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

Ответ 6

В среде бутстрапа вот мое решение:

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>