如何移除HTML嵌套表格右侧列的默认单元格内边距？

嘿，我来帮你搞定这个表格布局的小麻烦！你的情况是父表格的每个<td>里嵌套了子表格，右侧列因为内容少，自动出现了默认内边距，导致内容没法紧跟上方的“Add New PID”按钮，而且你试了span=0也没效果对吧？

问题根源 #

首先，span=0本来就不是表格布局里控制内边距的属性，所以没用很正常。大概率是你的表格（不管是Bootstrap自带的还是自定义的table--bordered这类类）给单元格<td>加了默认的内边距，或者单元格的垂直对齐方式默认是middle，把内容居中了，看起来就有多余的空间。

几个可行的解决办法，你可以挨个试试： #

• 把单元格垂直对齐改成顶部
  默认表格单元格的vertical-align是middle，改成top就能让内容从单元格顶部开始排，直接跟上按钮：

  .table-top td {
      vertical-align: top;
      padding-top: 0; /* 如果顶部还有多余内边距，直接去掉 */
  }
  

  刚好你的父表格已经有table-top类，直接给这个类的td加样式就行，不用改HTML结构，很方便。

• 直接移除单元格的默认内边距
  打开浏览器开发者工具（按F12）选中右侧的<td>，看看是不是有padding样式在搞鬼。如果有的话，直接覆盖：

  .table-top td {
      padding: 0; /* 完全移除，也可以按需写padding: 0 10px;这样保留左右内边距 */
  }
  

  要是只想改右侧列，不想影响左边，可以给右侧的<td>加个自定义类，比如no-extra-padding：

  <td class="no-extra-padding">
      <custom-table here></custom-table>
  </td>
  

  然后写样式：

  .no-extra-padding {
      padding: 0 !important; /* 用!important确保覆盖默认的表格样式 */
  }
  

• 检查子表格的外边距
  有时候不是父单元格的问题，是子表格自己带了margin-top，导致和按钮之间有间距。你可以给子表格加个样式去掉外边距：

  custom-table {
      margin-top: 0;
  }
  

小技巧 #

用浏览器开发者工具的元素选择器，点一下右侧的<td>，看Styles面板里的样式规则，找到哪个属性在控制内边距或者对齐，直接针对性修改，比瞎试效率高多啦！

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