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

我希望我的网站根据网页浏览器的大小显示不同。基于来自其他用户的问题/答案，我得到了这个工作与JavaScript onload。但是我无法动态地实现它 - 也就是说，随着用户正在调整窗口，这是实时的。他们必须刷新以获取网页的格式才能更改。如何根据浏览器窗口大小动态调整html表格

这里是我当前的代码：

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

注：我知道我不应该使用的表，我应该使用div秒。但那是另一个问题......在我知道之前，我开始建立这个网站。我也知道这很sl。。所以，只要忍受我。我正试着和它一起去，直到我有时间修复它。

来源

2014-09-01 John Steve

$（窗口）.resize（函数（）{ ...}）; – Oliboy50 2014-09-01 00:46:55

不要觉得不舒服，桌子和内嵌框架还没有死！而且不会有更近的未来。 – 2014-09-01 00:48:22

@GuillermoGutiérrez不知道你在看什么未来 - 他们很快就会死在大多数新作品中。 – 2014-09-01 00:50:38

你不应该使用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; 
    }

您可以了解更多有关媒体查询here }

来源

2014-09-01 00:59:53

谢谢！这很好！感谢帮助！ – 2014-09-01 13:10:19

所以我会很感激，如果你可以officialy“接受”我的回答;） – 2014-09-01 22:34:28

完成！对不起，我是新来的stackoverflow。甚至不知道你可以做到这一点哈哈 – 2014-09-06 20:33:04

添加的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

来源

2014-09-01 00:53:02 Ahmad

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

回答

相关问题