Как увеличить разрыв между табличными колонами? css-table

Question

У меня есть простая таблица с двумя столбцами, я бы хотел расширить разрыв между столбцами. Я пробовал свойство column-gap без успеха. Как я могу расширить разрыв?

JSFiddle

 #t td { 
 
     -webkit-column-gap: 40px; 
 
     -moz-column-gap: 40px; 
 
     column-gap: 40px; 
 
     } 
 
     #t tr:hover { 
 
     background-color: #00FF00; 
 
     } 
 
     #t tr:first-child { 
 
     font-weight: bold; 
 
     }

<table id="t"> 
 
    <tr> 
 
    <td>Column1</td> 
 
    <td>Column2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1000</td> 
 
    <td>2000</td> 
 
    </tr> 
 
</table>

Answer 1

Вы можете использовать интервал между границами, как показано в ответе с помощью pseudoAJ. Но проблема в том, что вы получаете пространство слева и справа от таблицы, если вы установите вертикальный интервал между границами.

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

Например, установить border-left: 100px solid #FFF; и установить border:0px для первой колонки.

tr:hover { 
 
    background-color: #00FF00; 
 
} 
 
tr:first-child { 
 
    font-weight: bold; 
 
} 
 

 
td,th{ 
 
    border-left: 100px solid #FFF; 
 
} 
 

 
tr>td:first-child { 
 
    border:0px; 
 
}

<table id="t"> 
 
    <tr> 
 
    <td>Column1</td> 
 
    <td>Column2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1000</td> 
 
    <td>2000</td> 
 
    </tr> 
 
</table>

Answer 2

Используйте border-spacing свойство и добавить CSS для table. Вот рабочий пример:

Демо: jsfiddle

#t td { 
 
    -webkit-column-gap: 40px; 
 
    -moz-column-gap: 40px; 
 
    column-gap: 40px; 
 
} 
 
#t tr:hover { 
 
    background-color: #00FF00; 
 
} 
 
#t tr:first-child { 
 
    font-weight: bold; 
 
} 
 
table { 
 
    border-collapse: separate; 
 
    border-spacing: 50px 0; 
 
}

<table id="t"> 
 
    <tr> 
 
    <td>Column1</td> 
 
    <td>Column2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1000</td> 
 
    <td>2000</td> 
 
    </tr> 
 
</table>

Далее, here является пост, который может помочь.