尚未解答Web_Design- display:flex 無法自動折行
Web_Design- display:flex 無法自動折行
各位朋友好 想詢問一下
dispaly:flex 無法自動折行(對齊) 是否能教導一下呢，謝謝。
---------------------------------------------------------
HTML
<!DOCTYPE html>
<html>
<head>
<title>RWD Table Demo</title>
<link rel='stylesheet' href='style.css'>
<script src='script.js'></script>
</head>
<body>
<table class='rwd-table'>
<thead>
<tr>
<th>No</th>
<th>ID</th>
<th>Name</th>
<th>Cell Phone</th>
<th>Address</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th='No'>1</td>
<td data-th='ID'>A0001</td>
<td data-th='Name'>Craig</td>
<td data-th='Cell Phone'>09123456780912345678</td>
<td data-th='Address'>YiLan</td>
<td data-th='Birthday'>1988/07/04</td>
</tr>
<tr>
<td data-th='No'>2</td>
<td data-th='ID'>B0002</td>
<td data-th='Name'>Vivian</td>
<td data-th='Cell Phone'>0998765432<br>0912345678sss</td>
<td data-th='Address'>Tainan</td>
<td data-th='Birthday'>1988/01/27</td>
</tr>
<tr>
<td data-th='No'>3</td>
<td data-th='ID'>C0003</td>
<td data-th='Name'>Tom</td>
<td data-th='Cell Phone'>0974185296</td>
<td data-th='Address'>Taipei</td>
<td data-th='Birthday'>1990/10/14</td>
</tr>
<tr>
<td data-th='No'>4</td>
<td data-th='ID'>D0004</td>
<td data-th='Name'>Mary</td>
<td data-th='Cell Phone'>0936925814</td>
<td data-th='Address'>US</td>
<td data-th='Birthday'>1978/03/05</td>
</tr>
<tr>
<td data-th='No'>5</td>
<td data-th='ID'>E0005</td>
<td data-th='Name'>Jan</td>
<td data-th='Cell Phone'>0912456789</td>
<td data-th='Address'>UK</td>
<td data-th='Birthday'>1989/04/01</td>
</tr>
</tbody>
</table>
</body>
</html>
-----------------------------------------------
CSS
/*20180123 新增NEW RWD Table*/
.rwd-table th, .rwd-table td {
border: 1px solid ;
padding: 2px 4px;
}
.rwd-table tr:nth-of-type(odd) {
background: #DDDDDD;
}
@media screen and (max-width: 500px) {
.rwd-table tr {
border: 1px solid;
}
.rwd-table th {
display:none ;
}
.rwd-table td {
display:flex;
border: none;
text-align: left;
border-bottom: 1px dotted #ccc;
}
.rwd-table td:before {
content: attr(data-th) ' : ';
float: none ;
display: inline-block;
white-space:nowrap;
color: #4A5E03;
font-weight: bold;
width: 6.5em;
padding: 0.2em !important;
}
}
--
0個答案
Web_Design- display:flex 無法自動折行
