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 - 请参阅下面的演示：

＆＃13;

table {
  display: block;
}
tr > th {
  display: none;
}

tr > td {
  display: block;
}

tr {
  display: block;
  border-bottom: 1px solid red;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

CSS：表多列到单列

2 个答案: