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的代码后，我发现了column-span，但它根本不起作用... 我坚持使用表格标记而不是div，并且只使用CSS...更像是我希望表格成为响应式模板...

- newnoob

---

为什么不使用 div 标签来实现这种输出呢？ - Ashish sah

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>

- kukkuz

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>

- Saw Zin Min Tun