橙色单元格内嵌套一个1行3列的表格时遇到的问题

来源:3-4 编程练习

慕仔8311585

2020-05-06 23:35:01

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8">
</head>
    <body>
    	<table width="100%">
    	    <tr bgcolor="pink" height="80px"><td>页头</td></tr>
    	    <tr height="10px"><td></td></tr>
    	    <tr bgcolor="orange">
    	        <td>
    	            <table width="100%" align="center">
    	                <tr>
    	                    <td width="240px" bgcolor="white">左侧内容</td>
    	                    <td width="20px" bgcolor="orange"></td>
    	                    <td width="764px" bgcolor="white">右侧内容</td>
    	                </tr>
    	            </table>
    	        </td>
    	    </tr>
    	    <tr height="10px"> <td></td></tr>
    	    <tr bgcolor="black" height="80px"><td></td></tr>
    	</table>
    </body>
</html>

显示结果和预期有差异,请问应该如何修改代码?谢谢!

写回答

1回答

好帮手慕夭夭

2020-05-07

同学你好,是因为表格设置了宽度100%,那么它整个表格占据一整行,两侧就把橙色背景也盖住了,把宽度去掉,让它默认被内容撑开,两侧就能露出了橙色背景:

http://img.mukewang.com/climg/5eb3711409f21fc119090098.jpg

http://img.mukewang.com/climg/5eb3712909375e7507390245.jpg

祝学习愉快 ~

1

0 学习 · 40143 问题

查看课程