gpt4 book ai didi

html - 填充表格行

转载 作者:技术小花猫 更新时间:2023-10-29 11:31:57 24 4
gpt4 key购买 nike

<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 是如何不受影响的。解决办法是什么? Table Row Padding Issue

最佳答案

诀窍是在 td 元素上填充,但第一个异常(exception)(是的,它很 hacky,但有时你必须遵守浏览器的规则):

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

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

第一个 child 得到相对较好的支持: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 - 填充表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3656615/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com