当前位置：文江博客话题详情

CSS HTML Margin cell css-tables

CSS 单元格边距

发布于 2024-07-16 07:26:58 字数 108 浏览 13 评论 0原文

在我的 HTML 文档中，我有一个包含两列和多行的表格。如何使用 css 增加第一列和第二列之间的间距？我尝试过应用“margin-right: 10px;” 到左侧的每个单元格，但没有效果。

收藏 0

分享到微博

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

扫码二维码加入Web技术交流群

发布评论

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

评论（16）

紧拥背影 2024-07-23 07:26:58

警告：虽然 padding-right 可能会解决您的特定（视觉）问题，但这并不是在表格单元格之间添加间距的正确方法。 padding-right 对单元格的作用与对大多数其他元素的作用类似：它在单元格内添加空间。如果单元格没有边框或背景颜色或其他泄露游戏的内容，这可以模仿设置单元格之间的空间的效果，但不能以其他方式。

正如有人指出的，表格单元格的边距规范被忽略：

CSS 2.1 规范 – 表格– 表格内容的视觉布局

内部表格元素生成
带有内容的矩形框和
边界。单元格也有填充。
内部表元素没有
边距。

那么什么是“正确”的方式呢？如果您希望替换表格的 cellspacing 属性，则 border-spacing（禁用 border-collapse）可以替代。但是，如果需要每个单元格的“边距”，我不确定如何使用 CSS 正确实现这一点。我能想到的唯一技巧是使用上面的 padding ，避免单元格的任何样式（背景颜色、边框等），而是使用单元格内的容器 DIV 来实现此类样式。

我不是 CSS 专家，所以上面的内容很可能是错误的（如果知道的话那就太好了！我也想要一个表格单元格边距 CSS 解决方案）。

回复收藏 0 原文

梦行七里 2024-07-23 07:26:58

将此应用到您的第一个：

padding-right:10px;

HTML 示例：

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

Apply this to your first <td>:

padding-right:10px;

HTML example:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

回复收藏 0 原文

-黛色若梦 2024-07-23 07:26:58

如果你不能使用填充（例如你在 td 中有边框）试试这个

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

If you can't use padding (for example you have borders in td) try this

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

回复收藏 0 原文

北方的巷 2024-07-23 07:26:58

我意识到这已经很晚了，但郑重声明，您也可以使用 CSS 选择器来执行此操作（消除对内联样式的需要。）此 CSS 将填充应用于每行的第一列：

table > tr > td:first-child { padding-right:10px }

这将是您的 HTML，无CSS！：

<table><tr><td>data</td><td>more data</td></tr></table>

这允许更优雅的标记，特别是在您需要使用 CSS 进行大量特定格式设置的情况下。

I realize this is quite belated, but for the record, you can also use CSS selectors to do this (eliminating the need for inline styles.) This CSS applies padding to the first column of every row:

table > tr > td:first-child { padding-right:10px }

And this would be your HTML, sans CSS!:

<table><tr><td>data</td><td>more data</td></tr></table>

This allows for much more elegant markup, especially in cases where you need to do lots of specific formatting with CSS.

回复收藏 0 原文

你的往事 2024-07-23 07:26:58

遗憾的是，边距在单个单元格上不起作用，但是您可以在要在其之间放置空格的两个单元格之间添加额外的列...另一种选择是使用与背景颜色相同的边框...

回复收藏 0 原文

平安喜乐 2024-07-23 07:26:58

你可以简单地这样做：

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

不需要 CSS :) 这 10px 就是你的空间。

You can simply do that:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

No CSS is required :) This 10px is your space.

回复收藏 0 原文

爱她像谁 2024-07-23 07:26:58

尝试padding-right。不允许在单元格之间添加边距。

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

Try padding-right. You're not allowed to put margin's between cells.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

回复收藏 0 原文

潦草背影 2024-07-23 07:26:58

使用 border-collapse:separate; 对我来说不起作用，因为我只需要表格单元格之间的边距，而不是表格两侧的边距。

我想出了下一个解决方案：

-CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

-HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

Using border-collapse: separate; didn't work for me, because I only need a margin in-between the table cells not on the sides of the table.

I came up with the next solution:

-CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

-HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

回复收藏 0 原文

辞旧 2024-07-23 07:26:58

此解决方案适用于需要 border 和 padding 进行样式设置的 td。
（在 Chrome 32、IE 11、Firefox 25 上测试）

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

更新 2016

Firefox 现在支持它，无需 inline-block 和设置宽度

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }

<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

This solution work for td's that need both border and padding for styling.
(Tested on Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Updated 2016

Firefox now support it without inline-block and a set width

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }

<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

回复收藏 0 原文

影子是时光的心 2024-07-23 07:26:58

您不能以这种方式挑选出单元格中的各个列。在我看来，最好的选择是在第二列上添加 style='padding-left:10px' 并将样式应用到内部 div 或元素上。这样你就能获得更大空间的错觉。

回复收藏 0 原文

罪#恶を代价 2024-07-23 07:26:58

如果您可以控制表格的宽度，请在所有表格单元格上插入 padding-left，并在整个表格上插入负的 margin-left。

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

请注意，表格的宽度需要包括填充/边距宽度。以上面为例，表格的视觉宽度将为 700px。

如果您在表格单元格上使用边框，这不是最佳解决方案。

If you have control of the width of the table, insert a padding-left on all table cells and insert a negative margin-left on the whole table.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Note, the width of the table needs to include the padding/margin width. Using the above as an example, the visual width of the table will be 700px.

This is not the best solution if you're using borders on your table cells.

回复收藏 0 原文

遇到 2024-07-23 07:26:58

解决方案

我发现解决这个问题的最佳方法是尝试和错误的结合，并阅读我之前写的内容：

http:// /jsfiddle.net/MG4hD/

正如你所看到的，我遇到了一些非常棘手的事情......但是让这个看起来不错的主要因素是：

父元素（UL）：边框折叠：分离；边框间距：0.25em；左边距：-.25em；
子元素（LI）：显示：表格单元格；垂直对齐：居中；

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

SOLUTION

I found the best way to solving this problem was a combination of trial and error and reading what was written before me:

http://jsfiddle.net/MG4hD/

As you can see I have some pretty tricky stuff going on... but the main kicker of getting this to looking good are:

PARENT ELEMENT (UL): border-collapse: separate; border-spacing: .25em; margin-left: -.25em;
CHILD ELEMENTS (LI): display: table-cell; vertical-align: middle;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

回复收藏 0 原文

走野 2024-07-23 07:26:58

按照 Cian 设置边框代替边距的解决方案，我发现您可以将边框颜色设置为透明，以避免颜色与背景匹配。适用于 FF17、IE9、Chrome v23。如果您不需要实际的边框，这似乎是一个不错的解决方案。

回复收藏 0 原文

め七分饶幸 2024-07-23 07:26:58

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

使用填充不是正确的方法，它可能会改变外观，但这不是您想要的。这可能会解决您的问题。

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Using padding is not correct way of doing it, it may change the look but it is not what you wanted. This may solve your issue.

回复收藏 0 原文

征﹌骨岁月お 2024-07-23 07:26:58

您可以同时使用它们：

padding-right:10px;

padding-right:10%;

但最好与 % 一起使用。

You can use both of them:

padding-right:10px;

padding-right:10%;

But it's better to use with %.

回复收藏 0 原文

吖咩 2024-07-23 07:26:58

如果填充不适合您，另一种解决方法是添加额外的列并使用通过宽度设置边距。上面的填充解决方案都不适合我，因为我试图给单元格边框本身留出边距，这就是最终解决问题的方法：

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

使用 :nth-child 设置表格单元格边框的样式，以便第二个第三列似乎是单列。

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

If padding isn't working for you, another work around is to add extra columns and set a margin via width using <colgroup>. None of the padding solutions above were working for me as I was trying to give the cell border itself a margin, and this is what solved the problem in the end:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Style the borders of the table cells using :nth-child so that the 2nd and third columns appear to be a single column.

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

回复收藏 0 原文

~没有更多了~

关于作者

枫林﹌晚霞¤

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文