给表格加上一个空标签为什么会折行?

给表格加上一个空标签为什么会折行?

问题描述:

<!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>中使用非表格的其它元素,非表格元素会被浏览器的容错机制解析移动到表格之前或之后。