自从

Question

我正在尝试使用％而不是硬编码的像素值来获取一个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做同样的事情，那我就可以了。

Answer 1

对于响应式网页设计（或任何网页设计），这是一个简单的规则......

从不

自从

...使用表格定义页面的布局。表旨在显示表格数据，而不是定义页面的布局。请改用div元素

要记住的有用链接是http://shouldiusetablesforlayout.com/。

Answer 2

表不应该用于布局（如@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。

Answer 3

不要使用表格进行布局。无论如何，你不能轻易地用CSS做你想做的事情，因为你必须覆盖多个元素的display属性。

Answer 4

如果通过“响应”你的意思是当文字不适合时不会变得棘手，并保持图像大小（图像不能很好地缩放），那么你可以使用它：

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

基本上，您需要设置最小空间以容纳内容，然后您可以根据需要向外扩展。

虽然是，表格通常不受欢迎，但它是“为什么你想要这样做”的另一种形式，因为问题特别要求表格，所以没有必要完全改变问题以满足你的烦恼。

表适用于网站，它们的主要问题是它们需要一段时间才能完成设置，一旦设置完毕，它们就会永远保持这种状态，如果没有完全重新制表，就不可能更改它们。

这似乎不是主要问题。

如何使这个表结构响应

4 个答案:

从不

自从

自从