logo标签列表

在表格中添加行间距

htmlcsshtml-tablerowpadding
128
<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没有受影响。有什么解决方案吗？ 表格行填充问题

2
请使用<div>和<p>代替表格。 - Natrium
55
所提供的数据是表格形式的，应该放在一个表格中。 - Spencer
7个回答
178

关键是给 td 元素添加内边距，但对于第一个元素要特殊处理（是有些hacky的，但有时你必须按照浏览器的规则来操作）：

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

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

首个子元素有相对较好的支持：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child

你可以使用同样的推理方法，使用tr:first-child td来控制水平填充。

或者，通过使用:not运算符来排除第一列。尽管目前对此的支持不如前一种方法。

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}
我会使用:not运算符来排除单个项目，例如tr:not(#first_row)。 - jeff
@CengizFrostclaw 确实，那样会更简洁。但是支持不太好。 - Joeri Hendrickx
哦，你可能是对的。我不知道，只是觉得:not运算符是更受支持的，但是再说一遍，我只在Chrome中进行测试:D - jeff
9
这并不是“hacky”的，这正是这些选择器的设计初衷。 - spinners
2
@AdamLeggett 添加非语义化的HTML总是最后的选择。您可以通过使用:dir(rtl)伪类来适应RTL内容的规则（我会将其添加到答案中，但我实际上没有测试过）。 - Joeri Hendrickx
显示剩余4条评论
48
在 CSS 1 和 CSS 2 规范中，所有元素（包括 <tr>）都支持填充。然而，在 CSS 2.1 和 CSS 3 规范中，移除了对表格行（<tr>）的填充支持。我从未找到这个令人烦恼的更改背后的原因，它还影响了边距属性和一些其他表格元素（头部、尾部和列）。
更新：2015年2月，这个主题在 www-style@w3c.org 邮件列表上讨论了为table-row添加padding和border支持的问题。这将使标准盒模型也适用于table-row和table-column元素。这将允许 这样的例子。该主题似乎表明，在CSS标准中，表行padding支持从未存在过，因为它会使布局引擎变得更加复杂。在2014年9月30日的编辑草案中，所有元素都包含有关填充和边框的属性，包括表格行和列元素。如果最终成为W3C推荐，您的HTML+CSS示例可能最终可以在浏览器中按预期工作。
6
我也对原因非常感兴趣！ - Dan
20

选项 1

您也可以通过为行（tr）添加透明边框来解决此问题，例如：

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

效果很好，但如果你需要常规边框，则这种方法将无法正常工作。

选项2

由于行充当了分组单元格的方式，因此正确的做法是使用

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}
1
这个答案应该是基于问题的最佳答案。在列（td）中添加填充并不总是直截了当的事情（标题（th）也可能如此）。这个答案更准确地回答了这个问题。通常假设OP可以修改HTML，但是随着可视化构建器和CMS的普及，这种情况经常不是这样。已点赞。 - Mike A
1
还有一件事。我认为更好的做法是使用“border-collapse: collapse”而不是“inherit”。 - Mike A
@MikeA 那样做是没有帮助的，因为 border-spacing 只适用于 separate 边框。 - Rahul Purohit
8
给 td 添加内边距。
8
如果一个tr中有两个td，那么它们之间会有填充，而我不想要这种情况。 - Spencer
请自行尝试。 - Vinicius Bazanella
3
在元素前添加一个before元素：
tr::before {
  content: "";
  margin-left: 10px;
}

在“响应式”表格的情况下，对我来说很重要，即 td {display: table-row; }

-3
你可以简单地将这个样式添加到表格中。
table {
    border-spacing: 15px;
}
-4

这是一个非常古老的帖子，但我认为我应该发布我最近遇到的类似问题的解决方案。

答案：我通过将 tr 元素显示为 block 元素来解决了这个问题，即为 tr 元素指定 CSS 样式 display:block。您可以在下面的代码示例中看到这一点。

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<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>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.

10
这完全破坏了表格布局的通常方式。如果你要做这个，就不应该使用表格 - 使用一个普通的 div。 - caesay
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接