如何根据浏览器窗口大小动态调整HTML表格

Question

我希望我的网站能够根据浏览器大小以不同方式显示。根据其他用户的问题/答案，我已经通过JavaScript的onload实现了这一点。但是我无法使其动态工作 - 也就是说，在用户调整窗口大小时实时生效。他们必须刷新页面才能改变网页的格式。

这是我的当前代码:

<table class="index_table" border="0">
<tr>
    <!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
    <script>
    if (window.innerWidth > 900){
    document.write('<td rowspan="3" class="index_article"></td>');
    }
    </script>
    <!-- END OF JAVASCRIPT -->
    <td class="index_article_light">
        <h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
        <p class="index_instructions">INSERT PARAGRAPH HERE.</p>
        <p class="index_instructions">INSERT PARAGRAPH HERE. </p>
            <br />
            <form action="signup.html" style="vertical-align:top;">
                <table border="0"  style="margin-left:auto;margin-right:auto;width:400px;">
                    <tr>
                        <td>
                            <input type="text" name="search" class="firstname" value="&nbsp;First name">
                        </td>
                        <td>
                            <input type="text" name="search" class="lastname" value="&nbsp;Last name">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="text" name="search" class="email" value="&nbsp;Email">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="color:#979797;">Password:&nbsp;<br /><input type="password" name="password" class="password" value="Password"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="color:#979797;">Verify password:&nbsp;<input type="password" name="verify_passwords" class="password" value="Password"></div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select>
                                 <option value="kent">INSERT LIST HERE</option>
                            </select>
                        </tr>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="signup!" style="float:right;" id="result_submit">
                        </td>
                    </tr>
                </table>
            </form>
    </td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
    <script>
    if (window.innerWidth < 900){
    document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
    }
    </script>
    <!-- END OF JAVASCRIPT -->

注意：我知道不应该使用表格，应该使用

。但那是另外一个问题...在我知道这一点之前，我已经开始构建这个网站了。我也知道它相当混乱。所以请容忍我。我正在努力继续下去，直到有时间把它修整好。

- John Steve

---

$(window).resize(function(){ ... }); - Oliboy50

不要感到沮丧，表格和iframe并没有死！在不久的将来也不会消失。 - Guillermo Gutiérrez

@GuillermoGutiérrez 不确定你在看什么未来——它们很快就会在大多数新工作中消失。 - Moshe Katz

https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize - Moshe Katz

Answer 1

你不应该使用JavaScript来实现响应式网页设计，而是应该使用CSS和媒体查询。因此，你需要编写以下HTML代码：

<table class="index_table" border="0">
<tr>
    <!--This only will display on screen-width>900-->
    <td id="big_device_index" rowspan="3" class="index_article"></td>
    <td class="index_article_light">
        <h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
        <p class="index_instructions">INSERT PARAGRAPH HERE.</p>
        <p class="index_instructions">INSERT PARAGRAPH HERE. </p>
            <br />
            <form action="signup.html" style="vertical-align:top;">
                <table border="0"  style="margin-left:auto;margin-right:auto;width:400px;">
                    <tr>
                        <td>
                            <input type="text" name="search" class="firstname" value="&nbsp;First name">
                        </td>
                        <td>
                            <input type="text" name="search" class="lastname" value="&nbsp;Last name">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="text" name="search" class="email" value="&nbsp;Email">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="color:#979797;">Password:&nbsp;<br /><input type="password" name="password" class="password" value="Password"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="color:#979797;">Verify password:&nbsp;<input type="password" name="verify_passwords" class="password" value="Password"></div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select>
                                 <option value="kent">INSERT LIST HERE</option>
                            </select>
                        </tr>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="signup!" style="float:right;" id="result_submit">
                        </td>
                    </tr>
                </table>
            </form>
    </td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>

请使用以下CSS代码：

@media all and (max-width: 899px) {
    #big_device_index {
        display: none;
    }
@media all and (min-width: 900px) {
    #small_device_index {
        display: none;
    }

您可以在此处了解有关媒体查询的更多信息。

- red_trumpet

---

所以，如果您能正式“接受”我的答案，我将不胜感激;) - red_trumpet

完成了！抱歉，我是stackoverflow的新手。甚至不知道你可以这样做哈哈。 - John Steve

@red_trumpet 我的问题http://stackoverflow.com/questions/29683712/adjust-table-size-to-fit-in-screen-resolution?noredirect=1#comment47505652_29683712 可以用@media查询解决吗？ - OTUser

Answer 2

在if (window.innerWidth > 900){.....之外添加此内容。

$(window).resize(function(){
        if (window.innerWidth > 900){
                $('.index_article').remove();
                $('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
        }
}

希望这能对你有所帮助，确保首先包含jquery.min.js文件。

- Ahmad