td 中的表格填充

Question

很奇怪，我的 td 中有填充，但在我的检查元素中它是 0 填充，当我将鼠标悬停在我的 td 中时，我看到填充？有什么想法吗？ 很奇怪，哈哈。

这是我的html

table.md-table border="1"
  tr.md-table-content-row ng-repeat="(payroll_type, taxes) in ctrl.table_taxes | groupBy:'payroll_type'"
    td.md-table-content.tax_table
      div.pay-type layout="row" layout-align="center center" style="height:20px;"
        | {{ payroll_type | capitalize }}
        md-button.md-mini.md-primary.md-icon-button.md-mr-0.md-pd-0 ng-show="taxtableform.$visible" ng-click="ctrl.addTaxStatus(taxes)"
          md-icon.material-icons.md-fnt-sz-20 add_circle_outline
          md-tooltip Add Tax Status
      hr
        div.md-ta-c style="height:20px;"
          | Exemption
      hr
        div.md-ta-c style="height:20px;"
          | Status
      hr
        span ng-repeat="(status_name, taxes4) in taxes | groupBy:'payroll_type'"
          div.md-ta-c ng-repeat="tax in taxes4 | unique:'status_name'| orderBy: 'status_name'" style="height:20px;"
            hr
              | {{ tax.status_name }}
    td.md-table-content.tax_table.md-ta-r ng-repeat="(column_no, taxes2) in taxes |  groupBy:'column_no'"
      div.md-ta-c.md-mr-t-1 layout="row" layout-align="center center" style="height:20px;"
        span
          | {{ column_no }}
        md-button.md-mini.md-primary.md-icon-button.md-mr-0.md-pd-0 ng-show="taxtableform.$visible" ng-click="ctrl.removeColumn(taxes2)"
          md-icon.material-icons.md-fnt-sz-20 delete
          md-tooltip Delete Column
      hr
      span ng-repeat="(exemption, taxes3) in taxes2 |  groupBy:'exemption'"
        div.item-wrapper style="height:20px;"
          span ng-hide="taxtableform.$visible" e-style="width:50px;" editable-text="exemption" e-form="taxtableform" onbeforesave="ctrl.exemptionChecker($data, exemption, taxes2)"
            | {{ exemption | number: 2 }}
      hr
      span ng-repeat="(over_percentage, taxes3) in taxes2 |  groupBy:'over_percentage'"
        div.item-wrapper style="height:20px;"
          span ng-hide="taxtableform.$visible" e-style="width:50px;" editable-text="over_percentage" e-form="taxtableform" onbeforesave="ctrl.percentageChecker($data, over_percentage, taxes3)"
            | {{ over_percentage | number: 2 }}
      hr
      span ng-repeat="tax in taxes2 | orderBy:'status_name'"
        hr
          div.item-wrapper style="height:20px;"
            span ng-hide="taxtableform.$visible" e-style="width:50px;" editable-text="tax.amount" e-form="taxtableform" onbeforesave="ctrl.taxAmountChecker($data, tax)"
              | {{ tax.amount }}

Answer 1

你可以尝试在桌子上添加这种样式

  border-collapse: collapse;