Change table row layout with css

Question

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.

score 5 · Accepted Answer · edited Nov 11 '19 at 13:52

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/

score 1 · Answer 2 · answered Jun 25 '15 at 11:13

Try this set of css rules

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
tbody,
thead,tr {
  display: block;
}
th,
td {
  padding: 4px;
  display: block;
}

<table border="1">
  <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>

score 1 · Answer 3 · answered Jun 25 '15 at 11:26

If you want to display a single column then don't use multiple ,use a single tag if you want column heading but if don't want column heading then try this code:

<html>
<head>
<style>
span{
color:#019ac8;

}
table{
border:1px dotted #000;
}

</style>

</head>
<body>
<table>

  <tbody>
    <tr>
      <td><span>Cell</span> A1</td></tr>
      <tr><td><span>Cell</span> A2</td></tr>
      <tr><td><span>Cell</span> A3</td>
    </tr>
    <tr>
      <td><span>Cell</span> B1</td></tr>
      <tr><td><span>Cell</span> B2</td></tr>
     </tr> <td><span>Cell</span> B3</td>
    </tr>
  </tbody>
</table>
</body>
</html>

enter code here

Change table row layout with css

3 Answers3