CSS горизонтальный интервал между ячейками таблицы: как? - PullRequest
Новая
       6

CSS горизонтальный интервал между ячейками таблицы: как?

38 голосов
/ 18 марта 2009

Надеюсь, это легко, но я не нашел решения. Я хочу поместить пространство между столбцами в таблице.

Пример 

| Cell |<- space ->| Cell |<- space ->| Cell |

Важным моментом является то, что я не хочу места по краям. Существует свойство border-spacing, но оно не поддерживается в IE (6 или 7), так что это бесполезно. Это также помещает пространство по краям.

Лучшее, что я придумала, это поместить padded-right: 10px в ячейки таблицы и добавить класс к последнему, чтобы удалить заполнение. Это не идеально, потому что дополнительное пространство является частью ячейки, а не за ее пределами. Я полагаю, вы могли бы сделать то же самое с прозрачной рамкой?

Я также пытался использовать jQuery: 

$(function() {
  $("table > tbody > tr:not(:last-child").addClass("right-padding");
});

но даже для таблиц размером всего ~ 100 строк в некоторых случаях это занимало 200-400 мс, что слишком медленно.

Любая помощь приветствуется.

Спасибо

Для тех, кто предлагает столбцы, они не работают. Попробуйте это: 

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
  </style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>

Ответы [ 9 ]

20 голосов
/ 18 марта 2009

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

table td {
  border:solid 5x transparent;
}

И вы можете только применить его по горизонтали как так ... 

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

Вот полная рабочая демонстрация того, что, я полагаю, вы пытаетесь достичь ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      table {
        border: 1px solid black;
      }

      table td {
        background: yellow;
        border-left:solid 10px transparent;
      }

     table td:first-child {
       border-left:0;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

Я не верю, что IE6 поддерживает CSS: first-child, поэтому здесь есть обходной путь ... 

<!–-[if IE 6]>
<style type="text/css">
  table td {
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
  }
</style>
<![endif]-->
11 голосов
/ 05 марта 2012

Это может быть то, что вы ищете:

Вы можете использовать два значения: первое - горизонтальное пространство ячеек, второе - вертикальное. 

<table style="border-spacing: 40px 10px;">
8 голосов
/ 18 марта 2009

попробуйте использовать col s

пример 

<table>
    <col style="padding-right:20px;" />
    <col style="padding-right:30px;" />
    <col />
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

столбцы также поддерживают классы:)

надеюсь, это поможет

Дарко

РЕДАКТИРОВАТЬ: Для пояснения col это элемент, объявленный в верхней части таблицы, чтобы влиять на целые столбцы. Первый элемент col будет влиять на первый столбец, второй col = второй столбец и так далее. Их можно сгруппировать в группы, если вы хотите назначить один и тот же стиль более чем одному столбцу.

EDIT2: После дополнительных исследований выясняется, что единственными надежными стилями, которые можно установить для элемента col, являются:

  • 1024 * Граница *
  • фон
  • ширина * 1 028 *
  • видимость

Без полей и отступов. Мудак! Будет ли установка ширины столбцов явным образом решить вашу проблему?

2 голосов
/ 06 января 2012

Ответ Джоша не работает, если у вас уже есть границы вокруг ваших клеток, как я.

Я решил проблему, слегка сместив всю таблицу влево, используя «position: относительный; left: -10px». Я совместил это с клеточным пространством на столе. 

<div id='sandbox'>
    <table cellspacing='10'>
          <tr>
                <td class='smoothBox'>
                    ...
                </td>
                <td class='smoothBox'>
                    ...
                </td>
          </tr>
    </table>
</div>

и css: 

#sandbox {
    float: left;
    position: relative; /* move the whole sandbox */
    left: -11px;        /* slightly to the left */
    width: 950px;
    margin-top: 0px;
    padding: 1px;
    text-align: left;
}
#sandbox table {
    float: left;
    width: 100%;
}
#sandbox td {
    width: 300px;
    vertical-align: top;
}

Это то, что работает для меня, я надеюсь, что это может помочь и вам.

2 голосов
/ 18 марта 2009

Вы также можете рассмотреть возможность использования серии div с фиксированной шириной, плавающих слева от полей. Это может дать вам немного больше контроля над стилем элемента. 

.row div {
     margin-right: 10px;
     float: left;
     width: 50px;
}

    <div class="row">
        <div>Cell One</div>
        <div>Cell Two</div>
        <div>Cell Three</div>
    </div>
1 голос
/ 25 января 2015

Это работа для меня

border-collapse: separate; border-spacing: 0px 3px;

1 голос
/ 18 марта 2009

Вы пробовали использовать группировку col? 

<table>
    <colgroup>
        <col class="right-padding" />
        <col class="right-padding" />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>
0 голосов
/ 14 июля 2011

Ответ Джоша довольно хороший, но, на мой взгляд, излишне сложный. Когда вы устанавливаете границы таблицы как «скрытые», а режим свертывания - «сворачивание», границы на внешних краях столбцов будут устранены, как и требуется.

Рабочий пример:

стилевой: 

table#my_table  {
    border-collapse: collapse;
    border-style: hidden;
}

table#my_table td {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

HTML: 

<table id="my_table">
   <tr>
     <td>A1</td>
     <td>A2</td>
     <td>A3</td>
   </tr>
   <tr>
     <td>B1</td>
     <td>B2</td>
     <td>B3</td>
   </tr>         
</table>
0 голосов
/ 18 марта 2009

Как насчет простого добавления пустой ячейки, которая работает как разделитель? Вы можете использовать col-тег, как указано выше, чтобы дать пустым ячейкам определенную ширину 

<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
</tr>

Или, если вы хотите сделать с ними больше, просто добавьте к ним классы вместо встроенных стилей ...

...