1

I have a simple table with two columns, I'd like to widen the gap between the columns. I've tried the column-gap property with no success. How can I widen the 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>
Ani Menon
  • 27,209
  • 16
  • 105
  • 126
BT93
  • 329
  • 2
  • 9
  • 25

2 Answers2

4

Use border-spacing property and add css for table. Here is the working example:

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

Further, here is a post that can help.

Community
  • 1
  • 1
PseudoAj
  • 5,234
  • 2
  • 17
  • 37
  • @rks This is not the best answer: [The extra space on the left](http://stackoverflow.com/a/37572153/2142994) – Ani Menon Jun 01 '16 at 14:55
2

You may use border-spacing as shown in the answer by pseudoAJ. But the issue there is that you get a space on left/right of the table if you set a vertical border-spacing.

Hence a better option is to use border size.

For example, set border-left: 100px solid #FFF; and set border:0px for the first column.

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>
Ani Menon
  • 27,209
  • 16
  • 105
  • 126
  • In practice I would recommend using a background color of #FFF0; (alpha of 0 so it is transparent) so that if you have any row hover color change effects (which you should for accessibility reasons) you don't see a white box like you do in the example. (however, it is good for the example so that you see what is going on) – Daniel May 27 '21 at 01:26