CODEWITHSUNDEEP
htmlcsshtml-tableresponsive
newnoob
newnoob

Reputation: 87

CSS: Table multiple column to single column

<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...

Upvotes: 3

Views: 724

Answers (2)

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

table{
      border-collapse: collapse;
}
table tr{
  border-top : 1px dotted #000;
  border-bottom : 1px dotted #000;
}
table tr td{
    display: block;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    line-height: 10px;
    padding: 4px;
    margin: 5px;
}
<table>

<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>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 2

Related Questions