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是否有解决方案？

谢谢， m。

Answer 1

正如@PeterB所说，不使用Java脚本就无法向表中添加行。

如果可能的话，您可以使用Javascript在窗口全局对象上为resize事件添加侦听器。（文档：resize - Event reference | MDN）

使用CSS可以为媒体查询提供一些解决方案。

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

<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>

如果仅在HTML中屏幕尺寸小于768像素，则在特定位置将2分行

2 个答案: