rks rks - 6 months ago 10
CSS Question

How do I widen the gap between table colums? css-table

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>




Answer

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.