Question

我正试图在我的表格行中填充一些数据，其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;
}

但是我的表格行中的数据周围仍然没有任何填充。这是小提琴说明这一点 - https://jsfiddle.net/77zhfe27/。如何才能显示填充？

Answer 1

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

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

Answer 2

let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6) let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera) myView.isMyLocationEnabled = true myView = mapView不适用于行。

常用的解决方法是将padding设置为单元格padding，但使用td上的border-spacing可以获得类似的效果。

虽然两者都有缺点，但是你在单元格之间也得到了空间，所以作为一种解决方法，如果真正需要它在行上，则要么是将表嵌套在表中，或者如下面的示例所示，使用行的table来创建填充效果

请注意，要border
的样式，table需要border-collpase: collapse {/ 1}}

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; }

Answer 3

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

密钥代码更改在这里。使用大填充（20px）显示重点。

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

这使您可以选择包含ID的表，并深入查看基本上是行（tr）和单元格（td）的表。你可以更全局化并影响所有这样的表：

table tr td{
    padding:20px;
}

然后根据需要覆盖单个表类或ID。

另外：鲍勃（这里的另一篇文章）给出了一个更好的例子，即使用填充来设置每一侧的填充（右上角左下）：6px 12px 6px 12px;这也有效，否则设置一个值将为所有方面设置。做一些像填充：6px 12px;将上/下设置为6px，将右/左设置为12px。

希望它有所帮助！

为什么填充不会在我的表行中生效？

3 个答案: