作者bernachom (Terry)
看板Web_Design
標題[問題] display:flex 無法自動折行
時間Sun Feb 14 18:41:19 2021
各位朋友好 想詢問一下
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;
}
}
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.160.206.133 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1613299281.A.667.html
1F：→ sanyaoooo: flex-wrap 02/14 19:28
2F：→ bernachom: 這個可以 但是無法對齊 02/14 22:02
3F：→ bernachom: 一直找不到方式對齊 02/14 22:02
4F：→ MarcoReus: word-break: break-all 02/14 23:14
5F：→ bernachom: 真的可以自動對齊 感謝 02/15 10:11
6F：→ bernachom: 不過還是有遇到一個問題 在IE下好像不能自動折行 02/15 11:33
7F：→ froce: 你期待ie可以正確顯示flex是不是有什麼誤會？ 02/16 21:29
8F：→ bernachom: 如果是這樣的話，所以RWD下就無法自動對齊折行囉? 02/16 21:36
9F：→ froce: Ie得有特別的其他hack才行，自己去google一下ie flex就知道 02/20 20:20
10F：→ froce: 在ie下的糟糕表現了 02/20 20:20
11F：→ bernachom: 有查過在flex在ie底下 好像有點慘，但我對前端不太熟.. 02/20 20:21
12F：→ bernachom: 如果要折行又要對齊 還有推薦的像flex可使用嗎?謝謝~ 02/20 20:22
14F：→ lin009: before 寬度都寫死了，padding 也寫死應該沒關係 (?) 02/21 03:04
15F：→ bernachom: 您好 上面的網址 好像沒辦法看? 02/24 07:16