[問題] display:flex 無法自動折行

看板Web_Design作者bernachom (Terry)時間3年前 (2021/02/14 18:41)推噓0(0推 0噓 15→)

留言15則, 5人參與討論串1/1

各位朋友好想詢問一下 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://www.ptt.cc/bbs/Web_Design/M.1613299281.A.667.html