html - 为什么第二行 td 与第一行的宽度相同

Question

<table  width="980" border="0">
    <tbody>
        <tr>
            <td width="25%">
                <img width="300"  style="overflow: hidden;" alt="" src="1.jpg">
            </td>
            <td width="75%">
                <h1>ttt</h1>
                <p>dgggg</p>
            </td>
        </tr>
        <tr>
            <td width="25%"><img  alt="" src="98.jpg"></td>
            <td width="25%"><img  alt="" src="57_998.jpg"></td>
            <td width="25%"><img  alt="" src="7_998.jpg"></td>
            <td width="25%"><img alt="" src="98.jpg"></td>
        </tr>
    </tbody>
</table>

为什么第二行td和第一行(第一行td)一样宽。 width="25%"不起作用。如何纠正？

Answer 1

使用 colspan 属性来实现这一点

<table  width="980" border="0">
<tbody>
<tr>
    <td width="25%"><h1>A</h1></td>
    <td width="75%" colspan="3"><h1>B</h1></td>
</tr>
<tr>
    <td width="25%">1</td>
    <td width="25%">2</td>
    <td width="25%">3</td>
    <td width="25%">4</td>
</tr>
</tbody>
</table>

关于 colspan 属性的一个很好的介绍可以在这里找到:http://reference.sitepoint.com/html/td/colspan

这是一个与您尝试实现的目标类似的简单示例 http://jsbin.com/egahey/1/