html - 为什么填充在我的表格行中没有生效?

标签 html css html-table padding

我正在尝试在表格行中的数据周围进行一些填充,其 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;
}

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

最佳答案

您需要将填充应用于 td 元素。

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

关于html - 为什么填充在我的表格行中没有生效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41154220/

相关文章:

php - 如何去除表头<the>缝隙

java - 在 Thymeleaf 数组中输入

javascript - 简单的 Javascript 在 FireFox 中不起作用(但在所有其他浏览器中都起作用)

css - Canvas 底部有空白,滚动得太远

javascript - 模态重叠内容并使内容在 Bootstrap 中不可点击?

html - IE 7 和 8 中的 css 倾斜转换

html - CSS Nth of Type 未定位

html - IE7 和 IE8 : Float clearing without adding empty elements

html - 表列更改行为取决于内容 (colspan)

javascript - 使用 Javascript 时我的表没有隐藏