【HTML】【CSS】<table>里面时常无效的margin和padding

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

<table>是很常用到的HTML标签，一个<table>通常里面还会有<tr>、<th>、<td>等HTML元素
如果我们对其使用开发者工具检查，会发现<table>的display属性会是display: table
而<td>的display属性则是display: table-cell

相对於flex、block、inline.....等等，表格的display属性相对来说比较少见，因此有时候会忘记其有些特别的特性
近期我就在此踩了些雷，因此才会撰写这篇文

<td>的margin无效，padding有效

在使用一些框架，像是Bootstrap时，我自然的在<td>上加上class="mt-3 ps-3"，然而，这一点效果都没有
范例：
https://codepen.io/linchinhsuan/pen/LYeQKJx
在此案例中可以发现，<td>的margin无效，padding有效

<tr>的margin无效，padding近於无效

换一个案例，这次我们在<tr>上加上class="mt-3 ps-3"
范例：
https://codepen.io/linchinhsuan/pen/GRyQbYQ
在此案例中可以发现，<tr>的margin无效
无法透过调整margin来让表格横列之间产生间距
至於padding，如果使用开发者工具来看，你会看到它确实出现了一个绿色的padding区块
然而，你会看到内文直接盖在padding区上，完全起不到padding该有的作用
因此<tr>的padding近於无效，或是想成无效就好

<table>的margin有效

最後是<table>本身
范例：
https://codepen.io/linchinhsuan/pen/KKZQjYj
基本上可以把<table>本身当作一个容器，因此margin很自然的产生作用了（恭喜，这是这篇文第一个成功使用的margin）
因此这里可以开心的宣布<table>的margin有效

至於padding则会视情况而定，在这个案例中padding是无效的
但如果我们改变了<table>的border-collapse属性
例如：
https://codepen.io/linchinhsuan/pen/LYeQwYj
设定border-collapse: separate;之後，padding就有效了
因此，<table>的padding会视情况有效，在border-collapse: collapse;时是无效的，因为这一行的意思就是让表格每一格紧紧合并着，怎麽可能让表格和里面的格子产生padding呢

以上，就是今天的一点小分享
主要是最近在做专案的时候，在<td>上套用Bootstrap的mt-3，结果无论如何都没反应
查了才知道原来是不起作用的，在此分享给大家