JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<p>Blank column space is preserved</p>

<table class="table">
    <colgroup>
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th class="hidden-xs">header xs</th>
            <th class="hidden-xs">header xs</th>
            <th class="hidden-xs">header xs</th>
            <th class="hidden-xs">header xs</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="hidden-xs">data xs</td>
            <td class="hidden-xs">data xs</td>
            <td class="hidden-xs">data xs</td>
            <td class="hidden-xs">data xs</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>

<p>Blank column space is removed</p>

<table class="table">
    <colgroup>
        <col class="hidden-xs" />
        <col class="hidden-xs" />
        <col class="hidden-xs" />
        <col class="hidden-xs" />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th class="hidden-xs">header xs</th>
            <th class="hidden-xs">header xs</th>
            <th class="hidden-xs">header xs</th>
            <th class="hidden-xs">header xs</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
        </tr>
   ...

CSS

.table
{
    border-collapse: separate;
    border:1px solid #f00;
    background: #f3f3f3;
    table-layout: fixed;
    width: 100%;
}

.table th,
.table td
{
    border: 1px solid #ccc;
    text-align: left;    
    padding: .2em .4em;
}