所用知识点 : table-layout: fixed
首先我们先用代码绘制一个表格
<body>
<table border="1px dashed" width="500px" height="400px">
<caption>表格的合并:内容超出</caption>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
</table>
</body>
实现效果为这样
但是如果表格里面的某一个单元格里面的内容过多的时候会把原本大小的单元格撑大 会把别的单元格挤掉
像下图这样
所以遇到这种情况 我们只需要在 table 中加入 table-layout: fixed 就可以啦
<table border="1px dashed" style="table-layout: fixed;">