如果僅在HTML中屏幕尺寸小於768像素，則在特定位置將2分行

Question

我已經建立了一張桌子，我需要用它在特定的位置將其分解。

如果屏幕尺寸小於768像素，則該行應分為2行。 新的生產線應該從食品和飲料單元開始。

這是桌子。

 <div style="overflow-x:auto;"> <table align="center" bgcolor="#006432" border="5" bordercolor="white" cellpadding="2" cellspacing="3"> <tbody> <tr> <td style="text-align: center;" width="12.5%"> <font color="white">Livestock<br />&amp; dairy</font> </td> <td style="text-align: center;" width="12.5%"> <font color="white">Business management</font> </td> <td style="text-align: center;" width="12.5%"> <font color="white">Climate<br />&amp; enviroment</font> </td> <td style="text-align: center;" width="12.5%"> <font color="white">Soils<br />&amp; crop</font> </td> <td style="text-align: center;" width="12.5%"> <font color="white">Food<br />&amp; drink</font> </td> <td style="text-align: center;" width="12.5%"> <font color="white">National programms</font> </td> <td style="text-align: center;" width="12.5%"> <font color="white">Grants &amp; schemes </font> </td> <td style="text-align: center;" width="12.5%"> <font color="white">New entrants</font> </td> </tr> </tbody> </table> </div> 

沒有CSS的HTML是否有解決方案？

謝謝，米。

Answer 1

正如@PeterB所說，不使用Java腳本就不可能向表中添加行。

如果可能，您可以使用Javascript在窗口全局對象上為resize事件添加一個偵聽器。 （doc： 調整大小-事件參考| MDN ）

使用CSS，可以為媒體查詢提供一些解決方案。

在HTML中，您可以在某些元素（ <div> ， <p>等）中使用<wbr>標記（文檔： wbr | MDN ）。

 <div style="overflow-x:auto;font-size:6em;color:white;background:#006432;" align="center"> <p>Livestock <wbr>&amp; dairy</p> <p>Business management</p> <p>Climate <wbr>&amp; enviroment</p> <p>Soils <wbr>&amp; crop</p> <p>Food <wbr>&amp; drink</p> <p>National programms</p> <p>Grants <wbr>&amp; schemes</p> <p>New entrants</p> </div> 

Answer 2

最終，我從cms開發人員那里得到了更新，他們建議使用此更新。 並給出了我不僅可以使用HTMl還可以使用CSS的選項。

感謝@PeterB和@Chocolord提供的建議和提示！ 高度贊賞。

 <ul id="flex-list"> <li>Livestock dairy</li> <li>Business management</li> <li>Climate enviroment</li> <li>Soils crop</li> <li>Food drink</li> <li>National programms</li> <li>Grants schemes</li> <li>New entrants</li> </ul> <style> #flex-list { background-color: rgb(0,100,50); display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; list-style: none; margin: 0; padding: 0;} #flex-list li { text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; min-width: 98px; padding: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; margin-top: -1px; margin-right: -1px;} #flex-list a {color: #fff;} @media screen and (max-width: 1034px) {#flex-list li {min-width: 178px; }} @media screen and (max-width: 880px) {#flex-list li {min-width: 248px;}} @media screen and (max-width:488px) {#flex-list {display: block;}} </style>