How to force wrap table row cells-CodePudding

<table>
  <tr>
    <th>Name:</th>
    <td>Apple</td>
  </tr>
  <tr>
    <th>Color:</th>
    <td>Golden</td>
  </tr>
</table>

How do I style the tr so that my output will look something like this (below). I want to force it... meaning that no matter the width available, it should wrap

Name:
Apple
Color
Golden

I know it is possible to do it with divs... But a solution for table is what Im looking for

Why would i want to do something like this?.. Because Im trying to make my table responsive.

CodePudding user response：

Use flex.

tr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

<table>
  <tr>
    <th>Name:</th>
    <td>Apple</td>
  </tr>
  <tr>
    <th>Color:</th>
    <td>Golden</td>
  </tr>
</table>

CodePudding user response：

You can add a direction for your table rows:

tr {
  display: flex;
  flex-direction: column;
}

Hope it helps!