填充表格行

发布于 2024-09-18 12:06:46 字数 1495 浏览 8 评论 0原文

<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 是如何不受影响的。解决办法是什么？表格行填充问题

原文

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

Here's what the padding looks like. See how the td inside isn't affected. What's the solution?
Table Row Padding Issue

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

好倦 2024-09-25 12:06:46

诀窍是在 td 元素上进行填充，但对第一个元素进行例外处理（是的，这很hacky，但有时你必须遵守浏览器的规则）：

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

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

First-child 得到了相对较好的支持： https://developer.mozilla.org/en-US/docs /CSS/:first-child

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

或者，使用 not 运算符。不过，目前对此的支持并不那么好。

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

The trick is to give padding on the td elements, but make an exception for the first (yes, it's hacky, but sometimes you have to play by the browser's rules):

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

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

First-child is relatively well supported: https://developer.mozilla.org/en-US/docs/CSS/:first-child

You can use the same reasoning for the horizontal padding by using tr:first-child td.

Alternatively, exclude the first column by using the not operator. Support for this is not as good right now, though.

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

回复收藏 0 原文

顾忌 2024-09-25 12:06:46

在 CSS 1 和 CSS 2 规范，填充可用于所有元素，包括 < tr>。然而，对表行填充 () 的支持已在 CSS 2.1 和 CSS 3 规格。我从未找到这个令人讨厌的更改背后的原因，它也会影响边距属性和其他一些表格元素（页眉、页脚和列）。

更新：2015 年 2 月，此帖子位于 < code>[email protected] 讨论有关添加支持的邮件列表表行的填充和边框。这会将标准盒模型也应用于表行和表列元素。它将允许此类示例。该线程似乎表明 CSS 标准中从未存在表行填充支持，因为它会有复杂的布局引擎。在 2014 年 9 月 30 日的 CSS 基本盒模型编辑草案中，所有内容都存在 padding 和 border 属性元素包括表行元素和表列元素。如果它最终成为 W3C 推荐，您的 html+css 示例最终可能会在浏览器中按预期工作。

回复收藏 0 原文

迷迭香的记忆 2024-09-25 12:06:46

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

Option 1

You could also solve it by adding a transparent border to the row (tr), like this

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

Works like a charm, although if you need regular borders, then this method will sadly not work.

Option 2

Since rows act as a way to group cells, the correct way to do this, would be to use

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}

回复收藏 0 原文

最单纯的乌龟 2024-09-25 12:06:46

给 td 填充

回复收藏 0 原文

无人问我粥可暖 2024-09-25 12:06:46

添加一个 before 元素：

tr::before {
  content: "";
  margin-left: 10px;
}

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

Add a before element:

tr::before {
  content: "";
  margin-left: 10px;
}

It was important to me in the context of 'responsive' tables, ie td {display: table-row; }

回复收藏 0 原文

懒猫 2024-09-25 12:06:46

您只需将此样式添加到表中即可。

table {
    border-spacing: 15px;
}

You could simply add this style to the table.

table {
    border-spacing: 15px;
}

回复收藏 0 原文

情绪失控 2024-09-25 12:06:46

这是一篇非常旧的帖子，但我想我应该发布我最近遇到的类似问题的解决方案。

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

<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.

This is a very old post, but I thought I should post my solution of a similar problem I faced recently.

Answer : I solved this issue by displaying the tr element as a block element i.e. specifying a CSS of display:block for the tr element. You can see this in code sample below.

<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.

回复收藏 0 原文

~没有更多了~