Невозможно установить поле для тега ‹td› без атрибутов CSS или cellspacing

По какой-то причине мне не удалось добиться, чтобы какие-либо ячейки таблицы имели маржу между ними. Я хочу, чтобы ячейки таблицы имели серый цвет фона (на белом фоне страницы), чтобы они выглядели как плитки с белым между ними.

Я пробовал в HTML,

<table cellspacing="3">

Также в CSS

table td {
    margin:3px;
}

Ничего не работает. Клетки все еще слиплись, как одна большая серая капля. Мне здесь не хватает чего-то очень простого?

Вот фактический код:

<table width="100%" cellspacing="3">
    <tr>
        <th>Document Number</th>
        <th>BP Reference No.</th>
        <th>Posting Date</th>
        <th>Posting Week</th>
        <th>Customer/Vendor Code</th>
        <th>Customer/Vendor Name</th>
        <th>Item No.</th>
        <th>Item/Service Description</th>
        <th>Item Group</th>
        <th>Warehouse Code</th>
        <th>Remaining Open Quantity</th>
        <th>Line No.</th>
        <th>Sales Employee Name</th>
        <th>Stock</th>
        <th>Fill Rate</th>
        <th>1046</th>
        <th>1047</th>
        <th>1048</th>
        <th>1049</th>
        <th>1050</th>
        <th>1051</th>
        <th>1052</th>
        <th>1053</th>
        <th>1054</th>
        <th></th>
    </tr>
    <tr>
        <td>17272</td>
        <td>2244100</td>
        <td>5/24/2010</td>
        <td>22</td>
        <td>NYST</td>
        <td>NYSTROM INC.</td>
        <td>NYM118SX26DSTKS01</td>
        <td>Nystrom, Mort. 1-1/8'', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
        <td>Mort Cylinders</td>
        <td>US1</td>
        <td>1000</td>
        <td>3</td>
        <td>KRE Management 1</td>
        <td>0</td>
        <td>100</td>
        <td>1000</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td></td>
    </tr>
</table>

html css html-table margin cellspacing
person jeffkee    schedule 09.12.2010    source источник

Ответы (7)


arrow_upward
93
arrow_downward

Если у кого-то все еще есть эта проблема, попробуйте это в своей таблице стилей CSS:

table {
  border-collapse: separate;
  border-spacing: 10px 5px;
}

Значения для расстояния между границами - это два измерения длины. Горизонтальное значение идет первым и применяется между столбцами. Второе измерение применяется между рядами.

Если вы укажете одно значение, оно будет использоваться как по горизонтали, так и по вертикали. Значение по умолчанию - 0, в результате чего границы на внутренней сетке таблицы увеличиваются вдвое.

person sebastian    schedule 14.04.2011
comment
Узнайте больше о краже-коллапсе: отдельный css-tricks.com/almanac/ properties / b / border-collapse - person Gaurav Ramanan; 29.06.2013

arrow_upward
7
arrow_downward

Если вы используете сброс CSS в начале таблицы стилей, проверьте, есть ли в нем следующий код.

table {
  border-collapse: collapse;
}

Если это так, попробуйте переопределить его с помощью:

border-collapse: separate;
person Sam Nabi    schedule 09.12.2010
comment
Сетка 960 может делать это ... позвольте мне попробовать. - person jeffkee; 09.12.2010
comment
Я подтвердил через Firebug, что коллапс на самом деле был частью сброса CSS, и мое переопределение также сработало, чтобы настроить его на разделение, и я все еще не вижу никаких полей. - person jeffkee; 09.12.2010
comment
@jeffkee, вы не увидите поля, пока не установите для ОБЕИХ border-collapse: separate и border-spacing значение 1 пиксель или больше. - person John Washam; 18.07.2013

arrow_upward
4
arrow_downward

сделать стиль тд с блоком. Попробуй это,

<table width="100%" border="0" cellpadding="2" cellspacing="1">
  <tbody>
    <tr>
      <td class="SlateGridDataError">Please Re-enter login information</td>
    </tr>
  </tbody>
</table>

.SlateGridDataError {
    border-radius: 2px;
    display: block;
    font-size: 14px;
    color: #999999;
    display:block;
    border: 1px solid #dd3c39;
    border-left: 5px solid #dd3c39;
    padding: 12px 5px;
    margin-bottom: 20px;
    cursor: default;
    outline: none;
}
person Falah    schedule 02.05.2016

arrow_upward
0
arrow_downward

Я думаю, cellspacing принимает тот же цвет, что и цвет фона таблицы.
Итак, у вас есть два варианта:
1. Применить цвет фона к tds, а не к самому <table>.
2. Возможно, вы захотите использовать белая рамка (border для <td> с border-collapse: collapse для таблицы)

person Nivas    schedule 09.12.2010
comment
У меня уже есть цвет bg, примененный к td, а не к таблице. Однако я попробую ваш вариант использования белых границ. - person jeffkee; 09.12.2010

arrow_upward
-1
arrow_downward

Попробуйте добавить td между двумя TD, у которых вы хотите иметь запас. Установите для него отсутствие фона (просто не используйте "background: something;") и установите желаемую ширину. Если вы хотите поместить отступ между двумя TR, просто добавьте еще один tr между ними и поставьте td с высотой, которую вы хотите, чтобы это поле было. Вы даже можете использовать один и тот же класс для TD и установить CSS только один раз.

person Breno    schedule 16.08.2014
comment
Пожалуйста, пример будет большим подспорьем - person Nabin; 16.08.2014
comment
Добавление дополнительных пустых тегов HTML для решения проблемы, связанной с CSS? ???????? - person CodeFinity; 21.07.2021

arrow_upward
-3
arrow_downward

Это грубое исправление, но оно работает.

Если вы создаете <table> с полями нужного вам размера ... содержащую ваш существующий, оба с использованием одного и того же фона или цвета, вы можете установить поля внешней таблицы, как вы хотите.

Если у вас есть серия из <TD> элементов, создайте <table> внутри <TD>, для которого вы хотите иметь поле, и снова убедитесь, что и внешний <table>, и внутренний <TD> имеют одинаковый фон или цвет.

пример из моего блога на http://harrolds.blogspot.com, который включает скрипт для отображения цитат ...

Основная таблица:

<table width="100%" bgcolor="lightblue" border=1>
<tbody>
  <tr>
    <td align="left" width="160"><span style="font-family:Times New Roman;font-size: -1;"><small><a href="http://en.wikipedia.org/wiki/Zell_Miller" target="_new">Sen. Zell Miller</a> <small>(D-GA) RNC'04</small></small></span><br /><object width="120" height="106"><param name="movie" value="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&amp;hl=en&amp;fs=1&amp;border=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="120" height="106"></embed></object><br /><font size="-1"><span style="color: blue; font-family: "sylfaen";><a href="http://www.harrold.org/rfhextra/support_our_Troops.html" target="_new"><b><small>Liberators &amp; Defenders</small></b></a></span></font> 
    </td>

    <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg">
      <table border=0>
        <tr>
          <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg"><script language="javascript" src="http://www.harrold.org/rfhextra/quote.js" type="text/javascript"></script>
          </td>
        </tr>
      </table>
    </td>

    <td align="right"><a href="http://www.cafepress.com/rightwingstuff" target="_new"><small><small>RightWingStuff</small></small></a><br /><a href="http://www.gadsdenandculpeper.com/" target="_new"><img src="http://harrold.org/rfhextra/images/GadsdenFlag98x130.gif" width="98" height="130" alt="link source  http://www.cafepress.com/rightwingstuff" border="0" /></a>
    </td>
  </tr>
</tbody>
</table>
person rharrold    schedule 22.08.2011
comment
ОТ: Речь идет о CSS или атрибутах таблиц. Использование новой таблицы для формирования прямоугольника не только не рекомендуется, но и является сдерживающим фактором. - person hynekcer; 14.11.2012

arrow_upward

arrow_downward

person    schedule
comment
Это было бы эквивалентом заполнения элемента, а не поля, как было запрошено. - person Mathias Lykkegaard Lorenzen; 26.02.2015