2

我正在尝试获取一个带有 % 而不是硬编码像素值的响应表，但是当我调整窗口大小时，我想要放置图像的列变得非常小。

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 做同样的事情，我会同意的。

4

4 回答 4

13

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

绝不

曾经

曾经

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

需要牢记的一个有用链接是http://shouldiusetablesforlayout.com/。

于 2013-04-27T17:26:01.017 回答
6

表格不应该用于布局（正如@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-27T17:23:55.993 回答
2

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

于 2013-04-27T17:13:58.267 回答
0

如果通过“响应式”您的意思是当文本不适合时不会出错，并保持图像大小（图像不能很好地缩放），那么您可以使用这个：

    <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-27T17:59:30.987 回答