<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

下面是填充物的外观.看看里面的td是如何不受影响的.解决方案是什么?

推荐答案

诀窍是对td个元素进行填充,但对第一个元素进行例外(是的,这很有黑客性,但有时你必须遵守浏览器的规则):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

第一个子元素的支持率相对较高:https://developer.mozilla.org/en-US/docs/CSS/:first-child

通过使用tr:first-child td,您可以对水平填充使用相同的推理.

或者,使用the not operator排除第一列.不过,目前对这一点的支持并不是很好.

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}

Html相关问答推荐

在屏幕右上角放置一个响应圆圈

使用视图调整图像大小

谷歌翻译不适用于JPEG标签

如何打破长URL,包含连字符在HTML与CSS

无法使xpath为HTML代码块工作

如何使用wai-aria标签访问相关的复选框?

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

由于列中的图像,它们不会随FlexBox中的窗口大小进行调整

Bootstrap 5.3.2模式页脚左填充还是左边距?

如何突破安莉得分

元素在向x提供溢出时被隐藏

多次使用组件时计数Angular 14中嵌套数组的指令

:after 伪元素没有出现,即使它有 content 属性

获取链接到功能的网页表单