将旧的 html 表转换为响应式答案

【问题标题】：Converting old html tables to responsive将旧的 html 表转换为响应式
【发布时间】：2015-10-03 16:02:38
【问题描述】：

我有一个已有 10 年历史的网站，所有内容都是使用表格构建的。由于最近谷歌网站排名的变化，我想让这个网站从表格中响应。页眉、左侧菜单、内容、右侧菜单、页脚是使用表格 tr 和 td 构建的。

我想要一个快速的解决方案，将所有表格快速转换为响应式 css。我不想对破坏网站设计的网站进行重大更改。

我希望左侧菜单在响应式小屏幕上消失，并以全宽显示内容，还希望每行折叠 1 个框。

示例代码如下。

我对 jquery/css 解决方案持开放态度。

<body>
<table  class="responsive" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody><tr> 
    <td colspan="3"> 
        <h1>Logo</h1>

</td></tr>
  <tr bgcolor="#66ccff"> 
    <td colspan="3">&nbsp; 
  </td></tr>
  <tr> 
    <td bgcolor="#66ccff" valign="top" width="16%"> 
       <table class="responsive-lmenu" width="100%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF">


   <tr> 
    <td class="menus"><a href="/antigua-citizenship.htm">Menu 1</a></td>
  </tr>

           <tr> 
    <td class="menus"><a href="/antigua-citizenship.htm">Menu 2</a></td>
  </tr>
           <tr> 
    <td class="menus"><a href="/antigua-citizenship.htm">Menu 3</a></td>
  </tr>
  </table>
      <p>&nbsp;</p></td>
    <td class="main" valign="top" width="68%"><p>&nbsp;</p>

      <table class="responsive" border="0" cellpadding="5" cellspacing="5" width="100%">
        <tbody>




          <tr valign="top"> 
          <td class="mainbox"><h1 align="center">Box 1</h1>


                <p align="center"><strong>Minimum Details</strong></p>
            <ul>

              <li>Line one</li>
              <li>Line two for the content</li>

            </ul> 

            </td>
          <td class="mainbox"><h1 align="center">Box 2</h1>
            <ul>
                <li>Line one</li>
              <li>Line two for the content</li>
            </ul>
           </td>
        </tr>


        <tr valign="top"> 
          <td class="mainbox"><h1 align="center">Box 3</h1>
            <div align="center">
            </div>
            <p align="center">Citizenship by Investment</p>
                <p align="center">Real Estate Investment</p>
            <ul>
              <li>Line one</li>
              <li>Line two for the content</li>
            </ul>
      </td>

          <td class="mainbox"><h1 align="center">Box 4</h1>
            <p align="center">Header</p>
            <ul>
              <li>Line 1</li>
              <li>Line 1</li>
              <li>Line 3 </li>
            </ul>
        </tr>



        </tbody><tbody>
        </tbody>
      </table>
      <p>&nbsp;</p>

      <p>&nbsp;</p></td>
    <td valign="top" width="16%">
    <br>
</td>
  </tr>
  <tr> 
    <td colspan="3"><p align="center">&nbsp;</p></td>
  </tr>
  <tr> 
    <td colspan="3">&nbsp;</td>
  </tr>
</tbody></table>

</body>

【问题讨论】：

我认为您需要重新创建站点。任何使用这种代码的旧东西都严重过时了。
不确定它是否会起作用 - 但请尝试将您的表格包装在一个 div 中，并使用类 table-responsive 并包括 bootstrap.css

标签： jquery html css

【解决方案1】：

这是可以做到的，但需要大量的工作。您的网站是几个静态页面，还是由 CMS（内容管理系统）运行/托管的大型网站的一部分？

假设它是几个静态页面，我建议看看 Bootstrap。它是一个响应式框架，将为您完成很多繁重的工作，而无需您编写数百个媒体查询。 http://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp

此外，谷歌正在寻找“响应式网站”的是页面上的标题。确保在完成刷新代码后，应用元信息：

<meta name="viewport" content="width=device-width, initial-scale=1">

此外，我建议您完成后，进入 google 的网站管理员工具，让他们重新索引您的网站，这样您就不必等待 google 再次抓取您的网站。

祝你好运。

【讨论】：

抱歉截断了元信息：
该网站有大约 30 个页面编码不佳。需要一个快速的解决方案，不想从头开始。我相信那里有 css 和 jquery 专家。
抱歉引导程序没有响应，出现水平滚动条并且没有多大帮助。

【解决方案2】：

我同意其他评论者的观点，即最好用新标准重写网站。但是，从经验来看，它并不总是最实用的。如果您有一个不使用模板的大型网站，它可能会成为一个耗时且繁重的项目。一种可能性是临时修复，它会在重新编码网站时阻止您。不过，我不完全确定此修复是否会修复您的搜索引擎评分，因为当前的布局不能仅使用 CSS 修复。

您需要使用 JS 将 .responsive-lmenu 从主表中分离出来，并将其放入页面顶部（徽标下方）的自己的 div 中。现有表可以保持原样，通过一些媒体查询将其显示更改为内联块。

例如小提琴见这里：http://jsfiddle.net/1atrsoaq/1/

编辑：这是一个修改后的小提琴，可以很好地与 IE9 配合使用（我希望大多数其他浏览器；当我有机会时会测试更多）：http://jsfiddle.net/1atrsoaq/5/。该脚本采用 .main .responsive td 元素，将它们转换为 div，然后将它们放入自己的 <td> 中以进行正确渲染。它还会去除其他一些导致内容显示不正确的<tr>。

【讨论】：

看起来很有说服力：我会测试它并很快回复您。
@pbu 我一直在修补 IE9（这台机器上没有安装 Safari）但收效甚微。我会继续努力。似乎有些浏览器不喜欢我们修改显示。可能需要使用 jQuery 来完全改变元素。
@pbu 我更新了我的答案。让我知道这是否有效。