css - 媒体查询，表格不能响应？

Question

网站管理员工具说表格 TD,TH 在 360px 屏幕和更小的屏幕上有 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;表格单元格将尝试保持其形式并允许所有单元格适合。如果你想强制它表现不同，那么你必须告诉它不是一张 table 。不只是 table ，还有 child 。听起来很傻，对吧？这是因为这是一种获取所需布局的奇怪方式。

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