CSS: Table multiple column to single column

Question

<table>
<tr>
 <th>Name</th>
 <th>phone no</th>
 <th>address</th>
</tr>
<tr>
 <td>Nadia</td>
 <td>012-4532564</td>
 <td>no 6,ampang, selangor, malaysia</td>
</tr>
<tr>
 <td>osman</td>
 <td>017-25698744</td>
 <td>no 20 street 3</td>
</tr>
</table>

above is my html coding, so the output will be

name | phone no     | address
------------------------------------------------------
nadia| 012-4532564  | no 6,ampang, selangor, malaysia
-----------------------------------------------------
osman| 017-25698744 | no 20 street 3
-----------------------------------------------------

I want using CSS to give the output like below...

-----------------------------------
| nadia                           |
| 012-4532564                     |
| no 6,ampang, selangor, malaysia |
-----------------------------------
| osman                           | 
| 017-25698744                    |
| no 20 street 3                  |
-----------------------------------

if using HTML we can use the colspan.. already search code using CSS, I found the column-span but it not working at all... I insisted on using table tag instead of div and only using CSS... it's more like I want the table to be the responsive template...

Answer 1

You can break the table display and change it to block - see a demo below:

table {
  display: block;
}
tr > th {
  display: none;
}

tr > td {
  display: block;
}

tr {
  display: block;
  border-bottom: 1px solid red;
}

<table>
<tr>
 <th>Name</th>
 <th>phone no</th>
 <th>address</th>
</tr>
<tr>
 <td>Nadia</td>
 <td>012-4532564</td>
 <td>no 6,ampang, selangor, malaysia</td>
</tr>
<tr>
 <td>osman</td>
 <td>017-25698744</td>
 <td>no 20 street 3</td>
</tr>
</table>