Как избавиться от автоматического пробела, добавленного в div в тд?

0

У меня есть простая таблица, подобная этой.

<table style='border-collapse: collapse;'>
    <tr>
        <td style='border: 1px solid blue;'>
        <div style='background-color: yellow;'>
            test
        </div>
        <div style='background-color: green;'>
            test
        </div>
        </td>
        <td style='background-color: red; border: 1px solid blue;'>
            test
        </td>
    </tr>
</table>

Эта таблица генерирует следующее:

Изображение 174551

Есть ли способ избавиться от пространства, которое добавляется между желтыми и зелеными div и границей стола?

  • 0
    Просто удалите обивку
Теги:
whitespace
css-tables

3 ответа

2
Лучший ответ

Это пространство - заполнение ячеек, вставленное многими (если не все) браузерами по умолчанию, которые вы можете легко удалить:

<td style='border: 1px solid blue; padding: 0;'>
2

Это происходит потому, что вы не нормализуя ваш CSS, браузер применяет некоторые по умолчанию margin и padding к некоторым элементам, Симметричным сбросить тех, здесь быстро исправить..

* {
    margin: 0;
    padding: 0;
}

демонстрация

Если вы хотите нормализовать свой CSS более мягким образом, чем вы можете использовать CSS Reset

1

Добавьте это в свой CSS

td {
    padding:0;   
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню