如何使这个表结构响应

我想获得具有％而不是硬编码像素值的resposive表，但是当我调整窗口大小时，我想要放置图像的列变得非常小。如何使这个表结构响应

HTML：

<TABLE BORDER=1 style="width: 90%; margin: 5%;"> 
    <TR> 
     <TD width="70%"> 
      <h4>ABOUT US</h4> 
      <p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      </p> 
      <p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p> 
      <br/><br/><br/><br/><br/> 
     </TD> 
     <TD width="30%" rowspan=2><img src="images/foto.jpeg"></TD> 
    </TR> 
    <TR> 
     <TD> 
      <h4>MEET THE TEAM</h4> 
      <p>content</p> 
     </TD> 
</TABLE>

jsFiddle

有没有办法做到这一点，这样的表以这种方式调整的column 2成为row 3？如果我不得不使用div来做同样的事情，那么我会好的。

来源

2013-04-27 Prateek

我不明白你在问什么。你是否想要设置rowspan和colspan？如果是这样，为了什么？真的很难理解你的意思。 – Dmitry 2013-04-27 17:16:24

您想做的事：？ – Dmitry 2013-04-27 17:18:15

实际上，我使用表格在两列网格中划分了我的页面，而在右侧，我只能放置一个图像，而在第一列的两行左侧，我必须写一些东西。我认为它会做。事实上它只是，它没有更多的回应。我想要一个响应式替代方案，即使没有表？ – Prateek 2013-04-27 17:18:33

这里有一个简单的规则，当谈到回应式网页设计（或任何一般的网页设计）...

决不

曾经

...使用表定义页面的布局。表格旨在呈现表格数据，而不是定义页面的布局。使用div元素代替

请注意一个有用的链接是http://shouldiusetablesforlayout.com/。

来源

2013-04-27 17:26:01

请勿使用表格进行布局。无论如何，你无法轻易地用CSS来做任何事情，因为你必须重写多个元素的显示属性。

来源

2013-04-27 17:13:58 imsky

+1对此答案。在大多数情况下，用于布局的表格是一个糟糕的主意，并且对于响应式设计中的布局是一个可怕的想法。所以解决这个问题的最好方法是避免它并使用更好的布局实践。 – DannyB 2013-04-27 17:37:51

布局表格仍然是基于HTML的电子邮件必须的表格，没有其他选择。 – Wyck 2013-05-21 22:35:42

表不应该被用于布局（如@davblayn指出的），但如果你想/需要使用它们：

HTML：

<TABLE BORDER=1 style="width: 90%; margin: 5%;"> 
    <TR> 
     <TD id='firstItem' width="70%"> 
      <h4>ABOUT US</h4> 
      <p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      </p> 
      <p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p> 
      <br/><br/><br/><br/><br/> 
     </TD> 
     <TD width="30%" id='responsiveItem' rowspan=2><img src="images/foto.jpeg"></TD> 
    </TR> 
    <TR> 
     <TD> 
      <h4>MEET THE TEAM</h4> 
      <p>content</p> 
     </TD> 
</TABLE>

CSS：

@media all and (max-width: 699px) and (min-width: 520px) { 
    td{ 
     width:100%; 
    } 
    #firstItem{ 
     display:block; 
    } 
    #responsiveItem{ 
     float:left; 
    } 
}

jsFiddle

玩调整JSFiddle窗口，column，当图像没有足够的空间时，图像将下降到row。

来源

2013-04-27 17:23:55 1andsock

嗨，欢迎来到Stack Overflow。我意识到提问者已经将所有代码发布在jsFiddle中，但是如果您可以在回答或问题中发布您的代码，将非常感激。目标是在未来轻松帮助人们，而不仅仅是原始的海报。出于这个原因，解释发生了什么，为什么也总是赞赏。非常感谢，祝你好运！ – Ben 2013-04-27 18:40:51

-1因为表不应该用于设计/布局目的 – 2013-10-02 16:02:09

@NicWortel，我明白这一点。但提问者使用表格，并且由于另一个用户创建了“最佳实践”答案，我创建了一个解决OP当前实现（使用表格）的答案。请参阅：http://meta.stackexchange.com/问题/ 145909 /最佳做法 - 答案 - 礼仪了解更多详情。 – 1andsock 2013-10-08 22:31:36

如果“响应”你的意思是，当文本不适合不走扭曲，并保持图像尺寸（图像没能很好的比例），那么你可以使用这个：

<table border="1" width="800px" height="250" style="min-width:800px; width: 90%; margin: 5%;"> 
     <tr> 
     <td> 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
     </td> 
     <td style="height: 250px; width: 250px;" rowspan="2">CONTENT</td> 
     </tr> 
     <tr> 
     <td> 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
     </td> 
     </tr> 
    </table>

基本上，你需要设置最小的空间来容纳内容，然后可以尽可能多地向外扩展。

虽然是的，但表格通常会被人们所不悦，它是另一种形式的“你为什么要这样做”，并且由于问题特别要求表格，所以不需要完全改变问题来满足你的宠物。

对于网站来说，表格工作正常，他们的主要问题是他们需要一段时间才能建立起来，并且一旦建立起来，他们就会永远保持这种状态，如果不重新制表，就不可能进行更改。

这似乎并没有出现在这里的主要问题。

来源

2013-04-27 17:59:30 Dmitry

如何使这个表结构响应

回答

决不

曾经

曾经

相关问题