Question

我只是一个初学者，但我已经解决了这个问题几个小时了。

在td中应用图像会将整个表格拉伸到一个奇怪的大小并破坏一切。该表是500 x 500和5列和行，该gif需要2列。 gif的大小是200 x 200.但是为什么它会这样伸展？

在应用gif之前：

link

gif之前的代码在这里：

<!DOCTYPE html>

<html>

    <head>
    </head>

    <body bgcolor="#264663">
        <table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1">
            <tr>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td rowspan="4" colspan="2"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2" rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </body>

</html>

之后：

<!DOCTYPE html>

<html>

<head>
</head>

<body bgcolor="#264663">
    <table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1">
        <tr>
            <td colspan="5"></td>
        </tr>
        <tr>
            <td rowspan="4" colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>
</body>

</html>

编辑：我尝试删除高度=＆＃34; 100％＆＃34;但后来发生了这种情况：

LINK HERE

Answer 1

100％的高度导致问题。

<td colspan="2" rowspan="2"><img style="display:block;" width="100%"  src="/pics/meanwhileatnintendo.gif" /></td>

只要您的图像是正方形，这应该可以。

Answer 2

显然，经过数小时的反复试验，这有效：

Image

`

<head>
</head>

<body bgcolor="#264663">
    <table style="table-layout:fixed;width:500px;height:500px;border-collapse:collapse;" bgcolor="#fddab4" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="5" background="/pics/5to1.jpg" height="100" width="100"></td>
        </tr>
        <tr>
            <td rowspan="4" colspan="2" height="400" width="200"></td>
            <td height="100" width="100"></td>
            <td height="100" width="100"></td>
            <td height="100" width="100"></td>
        </tr>
        <tr>
            <td height="100" width="100"></td>
            <td height="100" width="100"></td>
            <td height="100" width="100"></td>
        </tr>
        <tr>
            <td height="100" width="100"></td>
            <td height="200" colspan="2" rowspan="2" width="200" style="background-image:url(/pics/meanwhileatnintendo.gif)">
            </td>
        </tr>
        <tr>
            <td height="100" width="100"></td>
        </table>
</body>

`

但是，我想知道即使添加内容，还有一种更有效，更短的方法可以让细胞保持尺寸！

这就是我的问题：即使在其中添加单个字母，单元格仍会改变大小。现在我已经单独说明了每个单元格的大小，单元格不再调整大小，这太棒了！但是，对于这样一个简单的问题，还需要很多打字。还有别的吗？

图像在td中意外伸展

2 个答案: