VSCode编辑markdown文件内容,插入table后,Chrome浏览器显示的文章页面中表格上面有大量的空白的解决方法。

使用Markdown写文章时候需要插入表格,一般直接用Markdown的表格语法来创建,比如这样:

1
2
3
4
5
| 水果        | 价格    |  数量  |
| -------- | -----: | :----: |
| 香蕉 | $1 | 5 |
| 苹果 | $1 | 6 |
| 草莓 | $1 | 7 |

创建出来的表格效果:

水果 价格 数量
香蕉 $1 5
苹果 $1 6
草莓 $1 7

但是如果表格复杂一点,比如合并单元格,居中居左,背景颜色等设置,就需要用HTML里面的<table>表格来完成,比如HTML代码这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table>
<tbody>
<tr>
<th rowspan="2" style="text-align:center">解释变量</th>
<th style="text-align:right">输出结果</th>
<th></th>
</tr>
<tr>
<th style="text-align:center">定量数据</th>
<th style="text-align:center">定性数据</th>
</tr>
<tr>
<td style="text-align:center">定量数据(单个)</td>
<td style="text-align:center">(一元)回归分析</td>
<td style="text-align:center">逻辑回归</td>
</tr>
<tr>
<td style="text-align:center">定性数据(单个)</td>
<td style="text-align:center">每一类别的平均值汇总和t检验</td>
<td style="text-align:center">每一类别所占比例的汇总和卡方检验&quot;</td>
</tr>
<tr>
<td style="text-align:center">多个解释变量同时进行</td>
<td style="text-align:center">多元回归分析</td>
<td style="text-align:center">逻辑回归</td>
</tr>
</tbody>
</table>

创建出来表格效果:

解释变量 输出结果
定量数据 定性数据
定量数据(单个) (一元)回归分析 逻辑回归
定性数据(单个) 每一类别的平均值汇总和t检验 每一类别所占比例的汇总和卡方检验
多个解释变量同时进行 多元回归分析 逻辑回归

虽然可以创建出来表格,但是会发现表格上方有大量的空白,
打开Chrome的开发者工具,定位到表格部分,发现<table>标签上面有大量的<br>标签:

解决的方法是将原来的HTML代码删去缩进和空格,如下:

1
<table><tr><th rowspan=2 style="text-align:center">解释变量</th><th style="text-align:right">输出结果</th><th></th><tr><th style="text-align:center">定量数据</th><th style="text-align:center">定性数据</th></tr></tr><tr><td style="text-align:center">定量数据(单个)</td><td style="text-align:center">(一元)回归分析</td><td style="text-align:center">逻辑回归</td></tr><tr><td style="text-align:center">定性数据(单个)</td><td style="text-align:center">每一类别的平均值汇总和t检验</td><td style="text-align:center">每一类别所占比例的汇总和卡方检验"</td></tr><tr><td style="text-align:center">多个解释变量同时进行</td><td style="text-align:center">多元回归分析</td><td style="text-align:center">逻辑回归</td></tr></table>

解决后的效果:

解释变量输出结果
定量数据定性数据
定量数据(单个)(一元)回归分析逻辑回归
定性数据(单个)每一类别的平均值汇总和t检验每一类别所占比例的汇总和卡方检验"
多个解释变量同时进行多元回归分析逻辑回归