Question

我正在用文本和表格制作一个简单的 HTML页面，我希望它能够响应。因此，我使用了<viewport “width = device-width initial-scale = 1”>，但是我的页面看起来像这样：

但是我需要它看起来像这样：

我已经尝试从页面中删除表，一切看起来都很好。但是使用表时，它看起来不正确。如何在没有 BootStrap 的情况下使其正常显示？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0"/>
    <title>Name of title</title>

    <style>
        table { border: solid 1px; border-spacing: 0 }
        td { border: solid 1px; padding: 0.5em }
    </style>
    </head>
    <body>
    <h1>Poker Tutorial</h1>
    <div>
        <p>No-Limit Texas Hold'em is often said to be a game that takes only a             minute to learn, but a lifetime to master.</p>
        <p>While the game can involve extremely complicated strategies -     especially by the pros at the top level of the game, the fundamentals are fairly simple to learn. After watching this short video you should be able to take a seat at a play money table and know what your options are when it is your turn to act. </p>
    </div>
    <h2>Standard poker combinations</h2>
    <table>
        <tr><td>Combination</td><td>Example</td><td>Column3</td>                            <td>Column4</td><td>Column5</td></tr>
        <tr><td>Royal Flush</td>    <td>A&hearts;K&hearts;Q&hearts;J&hearts;10&hearts;</td><td>42112</td><td>21123</td><td>123123123</td></tr>
        <tr><td>Straight Flush</td><td>K&hearts;Q&hearts;J&hearts;10&hearts;9&hearts;</td><td>3216</td><td>4234</td><td>123123123</td></tr>
        <tr><td>Full House (3+2)</td><td>A&hearts;A&spades;A&diams;8&hearts;8&spades;</td><td>374214</td><td>23423423</td><td>123123123</td></tr>
        <tr><td>Flush (one suit)</td><td>K&hearts;Q&hearts;J&hearts;8&hearts;7&hearts;</td><td>512108</td><td>24234</td><td>123123123</td></tr>
        <tr><td>Straight (row)</td><td>K&hearts;Q&spades;J&diams;10&clubs;9&hearts;</td><td>1022100</td><td>24234234</td><td>123123123</td></tr>
        <tr><td>Triple (3 of a kind)</td><td>A&hearts;A&spades;A&diams;K&hearts;2&clubs;</td><td>5491221</td><td>423423</td><td>123123123</td></tr>
        <tr><td>Two pairs</td><td>K&hearts;K&spades;8&diams;8&hearts;2&clubs;</td><td>123552</td><td>42125</td><td>123123123</td></tr>
        <tr><td>Pair</td><td>K&hearts;K&spades;8&diams;3&hearts;2&clubs;</td><td>1098240</td><td>422133</td><td>123123123</td></tr>
</table>
    </body>
</html>

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0"/>
    <title>Name of title</title>

    <style>
        table { border: solid 1px; border-spacing: 0; width: 100%;}
        td { border: solid 1px; padding: 0.5em }

        #wrapper{ max-width: 100%;} //CHANGE THIS TO IF NEEDED.

    </style>
    </head>
    <body>

    <div id="wrapper"> // <-- ADD THIS WRAPPER TO INCLUDE ALL ITEMS

    <h1>Poker Tutorial</h1>
    <div>
        <p>No-Limit Texas Hold'em is often said to be a game that takes only a             minute to learn, but a lifetime to master.</p>
        <p>While the game can involve extremely complicated strategies -     especially by the pros at the top level of the game, the fundamentals are fairly simple to learn. After watching this short video you should be able to take a seat at a play money table and know what your options are when it is your turn to act. </p>
    </div>
    <h2>Standard poker combinations</h2>
    <table>
        <tr><td>Combination</td><td>Example</td><td>Column3</td>                            <td>Column4</td><td>Column5</td></tr>
        <tr><td>Royal Flush</td>    <td>A&hearts;K&hearts;Q&hearts;J&hearts;10&hearts;</td><td>42112</td><td>21123</td><td>123123123</td></tr>
        <tr><td>Straight Flush</td><td>K&hearts;Q&hearts;J&hearts;10&hearts;9&hearts;</td><td>3216</td><td>4234</td><td>123123123</td></tr>
        <tr><td>Full House (3+2)</td><td>A&hearts;A&spades;A&diams;8&hearts;8&spades;</td><td>374214</td><td>23423423</td><td>123123123</td></tr>
        <tr><td>Flush (one suit)</td><td>K&hearts;Q&hearts;J&hearts;8&hearts;7&hearts;</td><td>512108</td><td>24234</td><td>123123123</td></tr>
        <tr><td>Straight (row)</td><td>K&hearts;Q&spades;J&diams;10&clubs;9&hearts;</td><td>1022100</td><td>24234234</td><td>123123123</td></tr>
        <tr><td>Triple (3 of a kind)</td><td>A&hearts;A&spades;A&diams;K&hearts;2&clubs;</td><td>5491221</td><td>423423</td><td>123123123</td></tr>
        <tr><td>Two pairs</td><td>K&hearts;K&spades;8&diams;8&hearts;2&clubs;</td><td>123552</td><td>42125</td><td>123123123</td></tr>
        <tr><td>Pair</td><td>K&hearts;K&spades;8&diams;3&hearts;2&clubs;</td><td>1098240</td><td>422133</td><td>123123123</td></tr>
</table>

      </div> //<-- CLOSE THE WRAPPER TAG BY DOING THIS

    </body>
</html>

这是我修改的代码版本。

1.) I added a div using the id wrapper, just above the first <h1>.
2.) Add the closing tag after the table.
3.) Set properties to the ID inside the <style> element. I added max-width: 100% because it will resize depending on the screen.

让我知道它是否可以按照您的要求运行，否则我会尝试其他方法。 :)祝你好运。

使用<viewport“ width =” device-width“ initial-scale =” 1.0“”>，HTML页面上的表格比div占用更多的宽度

1 个答案: