为什么填充在我的 table 行中没有生效？

Question

我正在尝试在我的 table 行中填充一些数据，其 HTML 如下…

    <tr class="even subscription-row header">
            <td class="ig-header-title ellipsis">
            <img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon">
            <a class="name ellipsis" target="_blank" href="/scenarios/18">My Scenario</a>
        </td>  
        <td align="center"><a href="/scenarios/18/download"><img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon"></a></td>
    </tr>

我应用了这种风格……

.subscription-row {
    min-height: 30px;
    border-top-width: 0;
    border-radius: 0;
    border-bottom: 1px solid #C7CDD1;
    padding: 12px 6px 12px 10px;
    box-sizing: border-box;
}

.subscription-row img, .subscription-row .name {
  vertical-align: middle;
}

.subscription-row .name {
    color: #3d454c;
    font-size: 15px;
    font-size: .9375rem;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
    font-weight: bold;
}

但我的 table 行中的数据周围仍然没有任何填充。这是说明这一点的 Fiddle — https://jsfiddle.net/77zhfe27/ 。如何让填充出现？

Answer 1

您需要对 td 元素应用填充。

<style>
td {
  padding: 12px 6px 12px 10px;
}
</style>

Answer 2

我修改了你的Fiddle，它似乎有效：https://jsfiddle.net/77zhfe27/3/

关键代码更改在这里。使用大内边距 (20px) 显示重点。

table#subscriptions-table tr td{
    padding:20px;
}

这样您就可以选择 table 和您的 ID，并深入到本质上是行 (tr) 和单元格 (td) 的内容。您可以更加全球化并像这样影响所有 table：

table tr td{
    padding:20px;
}

然后根据需要用个人 table 类或 ID 覆盖。

此外：Bob（这里是另一个 post）使用 padding:6px 12px 6px 12px 给出了一个更好的例子来设置每边（右上角左下角）的填充；这也有效，否则设置一个值将为所有方面设置该值。做类似 padding:6px 12px 的事情；将 top/bottom 设置为 6px，将 right/left 设置为 12px。

希望对您有所帮助！

Answer 3

padding 不适用于行。

一种经常使用的变通方法是将 padding 设置为单元格 td，尽管在 table 上使用 border-spacing 可以获得类似的效果。

不过，两者的缺点是您在单元格之间也得到了 space ，因此作为一种解决方法，如果真的在行上需要它，是将 table 嵌套在 table 中，或者如下例所示，使用行的 border 来创建填充效果

请注意，table 需要 border-collpase: collapse 才能在 tr

上应用样式

table {
  border-collapse: collapse;
}
table tbody tr:hover {
  background-color: cyan
}
.subscription-row {
  min-height: 30px;
  border-color: transparent;
  border-style: solid;
  border-width: 12px 6px 12px 10px
}
.subscription-row td {
  border-bottom: 1px solid #C7CDD1;
}
.subscription-row img,
.subscription-row .name {
  vertical-align: middle;
}
.subscription-row .name {
  color: #3d454c;
  font-size: 15px;
  font-size: .9375rem;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: bold;
}

<table id="subscriptions-table">
  <thead>
    <tr>
      <th>Subscription</th>
      <th>Download</th>
    </tr>
  </thead>
  <tbody>
    <tr class="even subscription-row header">
      <td class="ig-header-title ellipsis">
        <img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon">
        <a class="name ellipsis" target="_blank" href="/scenarios/18">My Scenario</a>
      </td>
      <td align="center">
        <a href="/scenarios/18/download">
          <img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon">
        </a>
      </td>
    </tr>
  </tbody>
</table>

为什么填充在我的 table 行中没有生效？

Why isn't the padding taking effect in my table row?

html

css

html-table

padding