媒体查询，表格无法响应？

Question

网站管理员工具说表格 TD,TH 在 360 像素或更小的屏幕上有 100%，但它看起来不是那样的。我的问题在哪里？谢谢你的建议。对于现场测试，您可以访问我正在尝试制作的网站。 http://martinpodlesak.com/test4/ 我的代码：

<table id="hlstr">
        <tr>
            <td>
                <h2>Agentura Martina Podleďešáka</2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <p>Vestibulum justo nibh, pharetra vitae commodo eget, hendrerit sed velit.</p>
                    <p>Vestibulum sapien orci, aliquet rhoncus lacus ac, rutrum laoreet nunc. </p>
                    <p> Mauris viverra luctus volutpat. Praesent erat sem, luctus ac ornare ut, molestie eu quam.</p>
            <td>
                <h2>Co děláme?</h2>
                   <p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Úloha 1</a><p></p></button></p>
                   <p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Úloha 2</a><p></p></button></p>
                   <p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Úloha 3</a><p></p></button></p>
                   <p></p>
            </td>        
            <td> 
                <a class="twitter-timeline" data-lang="cs" data-width="315" data-height="300" href="https://twitter.com/podlesakmartin">Tweets by podlesakmartin</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
            </td>
        </tr>


    </table>

CSS

    table#hlstr td, th
    {
      width: 30%;
    }
    table#hlstr h2 {
        font-size: 15px;
    }

    table#hlstr p {
    font-size: 12px;}
@media only screen and (max-width: 360px) {
    button.w3-button.demo {height: 29.3px;}
    table#hlstr td,th {width: 100%;}

}

Answer 1

如果您绝对必须使用表格进行布局...绝不是这种情况，那么您必须告诉表格为display: block; 而不是display: table; 表格单元格将尝试并保持其形式和让所有的细胞都适合。如果你想强制它表现不同，那么你必须告诉它不要成为一张桌子。不只是桌子，还有孩子。听起来很傻，对吧？那是因为这将是一种奇怪的方式来获得你想要的布局。

<p><a href="http://www.google.com/"></a><button class="button10"><a href="#">Úloha 1</a><p></p></button></p>

p > 没有任何内容的链接...和一个按钮，里面有一个链接，然后是另一个段落...我认为这个地方需要再看看。

我敦促你这样想：

标记

<section class='my-meaningfully-named-section'>

  <div class='some-copy'>
    <h2>Some copy</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vestibulum justo nibh, pharetra vitae commodo eget, hendrerit sed velit.</p>
    <p>Vestibulum sapien orci, aliquet rhoncus lacus ac, rutrum laoreet nunc. </p>
    <p>Mauris viverra luctus volutpat. Praesent erat sem, luctus ac ornare ut, molestie eu quam.</p>
  </div>

  <div class='some-buttons'>
    <h2>Some buttons</h2>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>

  <div class='twitter-stuff'>
    <h2>Twitter stuff</h2>
    <a class="twitter-timeline" data-lang="cs" data-width="315" data-height="300" href="https://twitter.com/podlesakmartin">Tweets by podlesakmartin</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>

</section>

样式

/* all the divs are already 100% width... because they are block-level elements */

.my-meaningfully-named-section .some-copy {
  background: red;
}
.my-meaningfully-named-section .some-buttons {
  background: lightblue;
}
.my-meaningfully-named-section .twitter-stuff {
  background: yellow;
}



@media (min-width: 600px) { /* break-point-1 */

  .my-meaningfully-named-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .my-meaningfully-named-section .some-copy {
    flex-basis: 100%;
  }
  .my-meaningfully-named-section .some-buttons {
    flex-basis: 50%;
  }
  .my-meaningfully-named-section .twitter-stuff {
    flex-basis: 50%;
  }

}



@media (min-width: 900px) { /* break-point-2 */

  .my-meaningfully-named-section .some-copy {
    flex-basis: 30%;
    flex-grow: 1;
  }
  .my-meaningfully-named-section .some-buttons {
    flex-basis: auto;
  }
  .my-meaningfully-named-section .twitter-stuff {
    flex-basis: 300px;
  }

}

https://jsfiddle.net/sheriffderek/1h9051be/

Answer 2

众所周知，表格很难响应式地使用，因为它们的设计不是为了扩展。我建议以较小的宽度切换表格的display，使其由块级元素组成：

@media only screen and (max-width: 360px) {
  table, td, tr {
    display: block;
    width: 100%;
  }
}

使用display: block 将允许您根据自己的喜好操作表格内容。上面的代码使每一行在小于360px 处占据屏幕宽度的 100%。随意调整宽度，甚至 float 它们，以便根据自己的喜好修改布局。

请注意，在以下示例中，我已将媒体查询宽度修改为 700px，以便在 sn-p 中演示这一点。片段也不能包含 Twitter 时间线。如需可调整大小窗口中的完整示例，请查看this JSFiddle。

table#hlstr td,
th {
  width: 30%;
}

table#hlstr h2 {
  font-size: 15px;
}

table#hlstr p {
  font-size: 12px;
}

@media only screen and (max-width: 360px) {
  button.w3-button.demo {
    height: 29.3px;
  }
  table#hlstr td,
  th {
    width: 100%;
  }
}

/* New */
@media only screen and (max-width: 700px) {
  table,
  td,
  tr {
    display: block;
    width: 100%;
  }
}

<table id="hlstr">
  <tr>
    <td>
      <h2>Agentura Martina Podleďešáka</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Vestibulum justo nibh, pharetra vitae commodo eget, hendrerit sed velit.</p>
      <p>Vestibulum sapien orci, aliquet rhoncus lacus ac, rutrum laoreet nunc. </p>
      <p> Mauris viverra luctus volutpat. Praesent erat sem, luctus ac ornare ut, molestie eu quam.</p>
      <td>
        <h2>Co děláme?</h2>
        <p>
          <a href="http://www.google.com/"></a>
          <button class="button10"><a href="#">Úloha 1</a>
            <p></p>
          </button>
        </p>
        <p>
          <a href="http://www.google.com/"></a>
          <button class="button10"><a href="#">Úloha 2</a>
            <p></p>
          </button>
        </p>
        <p>
          <a href="http://www.google.com/"></a>
          <button class="button10"><a href="#">Úloha 3</a>
            <p></p>
          </button>
        </p>
        <p></p>
      </td>
      <td>
        <a class="twitter-timeline" data-lang="cs" data-width="315" data-height="300" href="https://twitter.com/podlesakmartin">Tweets by podlesakmartin</a>
        <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
      </td>
  </tr>
</table>

希望这会有所帮助！ :)