Как удалить по умолчанию таблицу border/spacing/padding?

Я использую таблицу для отображения изображения, названия и даты. Все работает отлично, и я доволен тем, как это выглядит, но вокруг изображения есть какое-то пространство, я думаю, что это граница стола/margin/padding.Как удалить по умолчанию таблицу border/spacing/padding?

Я хочу иметь изображение слева от стола, поэтому между ним не должно быть больше синего.

HTML:

<table style="background-color: blue;"> 
    <tbody> 
    <tr> 
     <td><img src="http://revistasindromes.com/images/100x100.gif"></td> 
     <td>Hello world!</td> 
     <td>Hello world!</td> 
    </tr> 
    </tbody> 
</table>

Here демо.

источник

2016-01-04 SjaakvBrabant

Возможно, у нас есть jsFiddle? –

добавить атрибут в таблицу tag cellspacing = "0" cellpadding = "0" –

@MuhammadSohailArif Извините, что я провалился, я уже подготовил демо, но забыл добавить его в вопрос. – SjaakvBrabant

сделать свой код, как показано ниже:

<table style="background-color: blue;" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td> 
    </td> 
    </tr> 
</table>

источник

2016-01-04 13:36:39

Это сработало отлично! '

' – SjaakvBrabant

@ Goldenowner отлично !!! :) –

Вы можете попробовать это:

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

В CSS, добавьте

table {border: none;}

источник

2016-01-04 13:36:24

Стоит отметить, что 'cellpadding' и' cellspacing' устарели в HTML5. [Это] (http://stackoverflow.com/questions/6048913/in-html5-with-respect-to-tables-what-replaces-cellpadding-cellspacing-valign) ответ идет о том, что вы должны использовать вместо этого. –

В W3C Working Draft 08 October 2015 for HTML 5.1 списки как cellspacing и cellpadding на table элементы как устаревший, и поэтому его использование sh избегать.

В разделе 11.2 Non-conforming features вы найдете следующее примечание;

элементы в следующем списке полностью устарели, и не должны быть использованы авторами

С обеих cellpadding и cellspacing добавлены в список

CELLPADDING на table элементов

cellpacing на table e lements

Так вот ваши варианты;

Вариант 1

Вы можете добавить следующие стили для текущей таблицы стилей;

table { 
    background-color: blue; 
    border-collapse: collapse; border-spacing: 0; /* cellspacing */ 
} 

th, td { 
    padding: 0px; /* cellpadding */ 
}

Это решение будет выглядеть примерно так, как эта скрипка; https://jsfiddle.net/z9tz4Lcb/

Вариант 2

Нормализация ваш CSS как уже упоминалось Vucko в комментариях.

Вы либо скачать и перевяжите файл normalize.css непосредственно из GitHub, или использовать какой-то CDN, как показано ниже

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">

Это решение будет выглядеть примерно так скрипкой; https://jsfiddle.net/x7a6kjvo/

.. и в то время как вы на это

Вы должны также установить display: block; в странице таблицы стилей для <img> тега, чтобы удалить крошечное пространство под вашим изображением.

Вы также можете использовать line-height: 0; на своем контейнере изображений или установить vertical-align: bottom; на свой тег img. Я также вижу людей, предлагающих использовать vertical-align: sub;, но это не будет работать в IE6 или IE7.

td > img { 
    display: block; 
}

источник

2016-01-04 14:06:15

Просто обратите внимание, что полезно использовать некоторый сброс CSS, например [normalize.css] (https://github.com/necolas/normalize.css/blob/master/normalize.css#L409), который содержит эту таблицу стили. – Vucko

Смежные вопросы