Convert a horizontal table into vertical with CSS

Question

Is it possible to convert a horizontal table to a vertical one using only CSS?

Here's what I have:

1st header cell	2nd header cell	3rd header cell	4th header cell
1st data cell	2nd data cell	3rd data cell	4th data cell

Here's what I want:

1st header cell | 1st data cell

2nd header cell | 2nd data cell

3rd header cell | 3rd data cell

4th header cell | 4th data cell

My code:

table{
  width: 100%;
  border-collapse: collapse;
}

td, th {
  text-align: left;
  border: 1px solid #ddd;
  padding: 10px;
}

<table>
  <tbody>
    <tr>
      <th>1st header cell</th>
      <th>2nd header cell</th>
      <th>3rd header cell</th>
      <th>4th header cell</th>
    </tr>
    <tr>
      <td>1st data cell</td>
      <td>2nd data cell</td>
      <td>3rd data cell</td>
      <td>4th data cell</td>
    </tr>
  </tbody>
</table>

Answer 1

Without changing your current code, you can shift the orientation of the table using this:

table {
  display: flex;
  align-items: center;
  justify-content: center;
}
tbody {
    display: flex;
    flex-direction: row;
}
tr {
    display: flex;
    flex-direction: column;
}

To adjust the centering of the table content, tweak the align-items and justify-content on the table.