Change table row layout with css

I've got a table

<table>
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </thead>
  <tbody>
    <tr>
      <td>Cell A1</td>
      <td>Cell A2</td>
      <td>Cell A3</td>
    </tr>
    <tr>
      <td>Cell B1</td>
      <td>Cell B2</td>
      <td>Cell B3</td>
    </tr>
  </tbody>
</table>

What I need to do is display the whole table as a single column using CSS

The output should be:

 +---------+
 | Cell A1 |
 +---------+
 | Cell A2 |
 +---------+
 | Cell A3 |
 +---------+
 | Cell B1 |
 +---------+
 | Cell B2 |
 +---------+
 | Cell B3 |
 +---------+

The reason behind this is that every table cell is very wide and the table is generated by CouchCMS in its admin panel.

Just add a little bit of CSS to display as block each element in the table, and hide your thead:

table,
tr,
td {
  display: block;
}

thead {
  display: none;
}

<table>
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </thead>
  <tbody>
    <tr>
      <td>Cell A1</td>
      <td>Cell A2</td>
      <td>Cell A3</td>
    </tr>
    <tr>
      <td>Cell B1</td>
      <td>Cell B2</td>
      <td>Cell B3</td>
    </tr>
  </tbody>
</table>

JSFIDDLE: http://jsfiddle.net/ghorg12110/k8pojm31/