给表格加上一个空标签为什么会折行?
问题描述:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <table border="1"> -->
<tr>
<td>1</td>
<td>2</td>
<div></div>
<td>3</td>
<td>4</td>
</tr>
<!-- </table> -->
</body>
</html>
为什么我给th2和td3中间加一个空div就会自动折行?原理是什么?
但是为什么给表格外层加上table标签就不会自动折行?
答
<tr>和<td>在<table>外使用就失去了原有的样式,变成与<span>类似的效果,
<div>是块元素会独占一行,所以<div>前后的内容都会换行。
当<tr>和<td>在<table>内使用才能有真正的作用。
<table>中<tr>的子元素只能是td或th,不能有其它元素,
如果<table>与<tr>中使用非表格的其它元素,非表格元素会被浏览器的容错机制解析移动到表格之前或之后。