贊助廠商

娛樂城推薦

首頁

電腦與網際網路/其他:電腦列表

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; }}--
  • 發問日期:2021-06-13 07:30:05

友站連結