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;表格单元格将尝试并保持其形状，并允许所有细胞适合。如果你想强迫它表现不同，那么你必须告诉它不要是一张桌子。不只是桌子，而是它的孩子。听起来很傻，对吗？这是因为这将是一种奇怪的方式来获得你想要的布局。

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

p＆gt;什么也没有链接......还有一个带有链接的按钮，然后是另一个段落......我认为这个地方需要另外看看。

我恳请你这样想：

标记

<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将允许您根据自己的喜好操纵表格内容。上面的代码使每行占据屏幕宽度的100％，小于360px。您可以随意调整宽度甚至float，以便根据自己的喜好修改布局。

请注意，在以下示例中，我已将媒体查询宽度修改为700px，以便在代码段中进行演示。片段也不能包含Twitter时间表。有关可调整大小窗口中的完整示例，请查看this JSFiddle。

＆＃13;

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%;
  }
}

＆＃13;

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

＆＃13;

希望这有帮助！：）

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

2 个答案:

标记

样式