Подтвердить что ты не робот

Межстрочный интервал ячейки таблицы CSS: как?

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

Пример

| 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>
4b9b3361

ОТВЕТЫ

Ответ 1

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

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]-->

Ответ 2

Возможно, вы задумываетесь:

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

<table style="border-spacing: 40px 10px;">

Ответ 3

попробуйте использовать 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>

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

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

Дарко

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

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

  • граница
  • фон
  • ширина
  • видимость

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

Ответ 4

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

.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>

Ответ 5

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

Я решил проблему, слегка сдвинув всю таблицу влево, используя "position: relative; 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;
}

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

Ответ 6

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

<table>
    <colgroup>
        <col class="right-padding" />
        <col class="right-padding" />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

Ответ 7

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

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

Ответ 8

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

<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>

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

Ответ 9

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

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

Стили:

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>