CSS：表格多列到单列答案

【问题标题】：CSS: Table multiple column to single columnCSS：表格多列到单列
【发布时间】：2018-02-06 08:44:59
【问题描述】：

<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 但它根本不起作用...我坚持使用 table tag 而不是 div 并且只使用 CSS ...更像是我希望表格成为响应式模板...

【问题讨论】：

如果你想要这种输出，为什么不使用 div？？

标签： html css html-table responsive

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：