CSS：表多列單列

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> 

以上是我的HTML編碼，所以輸出將

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

我想用CSS給像下面的輸出...

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

如果使用HTML，我們可以使用colspan ..已經使用CSS搜索代碼，我發現列跨度，但它根本不工作...我堅持使用table tag而不是div，只使用CSS ...更多像我一樣希望表是響應模板...

Answer 1

可以突破表display並將其更改爲block - 見下一個演示：

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>

Answer 2

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>