Question

我有一个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>

Answer 1

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

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

谷歌正在寻找一个响应式网站＆＃34;是页面上的标题。确保在完成刷新的代码后，应用元信息：

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

此外，我建议您一旦完成，请访问Google的网站管理员工具，让他们重新为您的网站编制索引，这样您就不会等待谷歌再次抓取您的网站。

祝你好运。

Answer 2

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

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

请参阅此处，例如小提琴：http://jsfiddle.net/1atrsoaq/1/

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

将旧的html表转换为响应式

2 个答案: