HTML5中如何仅通过table标签的style属性实现cellpadding效果

Hey there! Great question—let's break this down clearly.

首先要明确：严格来说，无法仅通过给<table>标签添加style属性直接实现和传统cellpadding完全一致的效果。原因很简单：inline CSS样式只能作用于当前元素（也就是<table>本身），没办法直接为它的子元素<th>/<td>设置padding属性——而cellpadding的本质，就是给每个单元格内部添加内容与边框之间的内边距，这必须作用于<th>/<td>元素。

不过，我有两个接近你需求的变通方案，能最大程度减少重复代码，符合你不想用内部<style>标签、也不想逐个给单元格加style的要求：

方案1：用CSS自定义属性减少重复代码 #

虽然还是需要给<th>/<td>加一点点style，但只需要在<table>里定义一次内边距值，所有单元格复用这个变量，写法非常简洁：

<table style="--cell-padding: 10px;">
  <tr>
    <th style="padding: var(--cell-padding);">Month</th>
    <th style="padding: var(--cell-padding);">Savings</th>
  </tr>
  <tr>
    <td style="padding: var(--cell-padding);">January</td>
    <td style="padding: var(--cell-padding);">$100</td>
  </tr>
</table>

这样如果要调整内边距，只需要修改<table>里的--cell-padding值即可，不用逐个改单元格。

方案2：用border-spacing模拟视觉效果（无边框场景适用） #

如果你的表格不需要显示边框，可以用border-spacing来模拟类似cellpadding的视觉效果——注意这是单元格之间的间距，和真正的cellpadding（单元格内部内边距）逻辑不同，但视觉上很接近：

<table style="border-collapse: separate; border-spacing: 10px;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

这个方案完全不需要给任何<th>/<td>加style，只在<table>上设置就行，但只适合不需要边框的场景（如果加了边框，单元格之间会有空隙，和cellpadding的效果差异明显）。

总结一下：如果要100%还原cellpadding的内部内边距效果，又不想用内部样式或逐个设置单元格，目前没有纯给<table>加inline style的完美方法，但上面的自定义属性方案是最接近的折中选择。

内容的提问来源于stack exchange，提问作者Honey Gupta