Как увеличить расстояние между столбцами таблицы в html?

Ответ 1

Нет необходимости в подделке <td>. Вместо этого используйте border-spacing. Примените его следующим образом:

HTML:

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

CSS

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

Смотрите в действии

Ответ 2

Установите ширину <td> на 50px, а затем добавьте <td> + еще один поддельный <td>

Fiddle.

HTML:

<table>
    <tr>
        <td>First Column</td>
        <td></td>
        <td>Second Column</td>
        <td></td>
        <td>Third Column</td>
    </tr>
</table>

CSS

table tr td:empty {
    width: 50px;
}

table tr td {
    padding-top: 10px;
    padding-bottom: 10px;
}

Объяснение кода:

Первое правило CSS проверяет пустое td и дает им ширину 50px, тогда второе правило дает отступы сверху и снизу ко всем td.

Ответ 3

Если я правильно понял, вам нужна эта fiddle.

HTML:

<table>
<tr>
    <td>Hello HTML!</td>
    <td>Hello CSS!</td>
    <td>Hello JS!</td>
</tr>

CSS

table {
    background: gray;
}
td {    
    display: block;
    float: left;
    padding: 10px 0;
    margin-right:50px;
    background: white;
}
td:last-child {
    margin-right: 0;
}

Ответ 4

Вы можете просто использовать прописку. так.

http://jsfiddle.net/davidja/KG8Kv/

HTML

   <table>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td>item2</td>
        </tr>
    </table>

CSS

 td {padding:10px 25px 10px 25px;}

ИЛИ

 tr td:first-child {padding-left:0px;}
 td {padding:10px 0px 10px 50px;}

Ответ 5

Try

padding : 10px 10px 10px 10px;

Ответ 6

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

Например,

table {
  border-collapse: separate;
  border-spacing: 80px 0;
}

td {
  padding: 10px 0;
}

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Ответ 7

Если вам нужно дать расстояние между двумя строками, используйте этот тег

margin-top: 10px !important;