【问题标题】:CSS Cell MarginCSS 单元格边距
【发布时间】:2010-10-17 12:24:22
【问题描述】:

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

【问题讨论】:

标签: html css cell margin css-tables


【解决方案1】:

此解决方案适用于需要 borderpadding 进行样式设置的 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 和一组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>

【讨论】:

  • 这也适用于由 div 组成的 css 表(display:table*)。
【解决方案2】:

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

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

【讨论】:

  • 这是掩盖问题,而不是回答问题。没有人会通过这样做来学习如何正确地做到这一点
【解决方案3】:

你可以同时使用它们:

padding-right:10px;

padding-right:10%;

但最好与 % 一起使用。

【讨论】:

  • 我投了赞成票,但您可能已经解释了为什么最好使用%
  • 通常使用 % 来做出响应。
  • 加一个 - 也许你可以编辑你的答案这么说?不是每个阅读的人都可能阅读 cmets.. 如果您想添加有关响应式设计的链接,那就更好了 :-)
【解决方案4】:

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

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

【讨论】:

  • 这个解决方案已经发布了,不需要2个答案说同样的话。
【解决方案5】:

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

【讨论】:

    【解决方案6】:

    解决方案

    我发现解决这个问题的最佳方法是反复试验和阅读我之前写的内容:

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

    【讨论】:

      【解决方案7】:

      警告:虽然padding-right 可能会解决您的特定(视觉)问题,但它不是在 表格单元格之间添加间距的正确方法。 padding-right 对单元格的作用类似于它对大多数其他元素的作用:它在单元格添加空间。如果单元格没有边框或背景颜色或其他让游戏无法进行的东西,这可以模仿设置单元格之间的空间的效果,但不是其他的。

      正如有人指出的那样,表格单元格的边距规格被忽略:

      CSS 2.1 Specification – Tables – Visual layout of table contents

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

      那么“正确”的方法是什么?如果您要替换表的cellspacing 属性,则border-spacing(禁用border-collapse)是一个替换。但是,如果需要每个单元格的“边距”,我不确定如何使用 CSS 正确实现。我能想到的唯一技巧是如上所述使用padding,避免单元格的任何样式(背景颜色、边框等),而是在单元格内使用容器 DIV 来实现这种样式。

      我不是 CSS 专家,所以我很可能在上面说错了(很高兴知道!我也想要一个表格单元格边距 CSS 解决方案)。

      干杯!

      【讨论】:

      • 这很好,而且全部用于填充,但是边距呢?我想在包含边框的单元格之外添加空间。 Margin CSS 似乎对单元格没有影响。
      • Levitikon,没错 - 由于上述原因,边距不起作用。 AFAIK,获得所需内容的唯一方法是将单元格的内容包装在 DIV 中,将边距 边框添加到该 DIV,而不是单元格。
      • 很久以前发过一个CSS解决方案(今天更新了):stackoverflow.com/a/21551008/2827823
      【解决方案8】:

      你可以这样做:

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

      不需要 CSS :) 这 10 像素是您的空间。

      【讨论】:

      • 这个不错,简单有效,谢谢提醒+1
      • 这不是分离结构和样式的好方法。这不是是否需要 CSS 的问题 - CSS 应该用于这样的事情。
      • 不应该是
      • 请记住,最简单的解决方案是最好的。内联样式的方法也不错:)
      • 它适用于我的具体情况。很有创意。谢谢
      【解决方案9】:

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

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

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

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

      【讨论】:

        【解决方案10】:

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

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

        【讨论】:

        【解决方案11】:

        试试padding-right。不允许在单元格之间放置margin

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

        【讨论】:

          【解决方案12】:

          将此应用于您的第一个&lt;td&gt;

          padding-right:10px;
          

          HTML 示例:

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

          【讨论】:

          • 更好的方法是使用border-collapse:seperate
          • 以防万一有人在上面的评论中复制/粘贴边框折叠技术,它应该是border-collapse: separate(上面separate的拼写有错别字)
          • 另外,如果你想定义边框之间的空间量,你将不得不使用border-spacing: 5px;
          • border-spacing 还会在行之间添加空格。不幸的是,垂直和水平间距没有单独的属性。
          • border-spacing 接受两个参数 - 一个用于水平,一个用于垂直。
          【解决方案13】:

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

          【讨论】:

            【解决方案14】:

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

            【讨论】:

            • 似乎边框与填充有相同的问题 - 它在单元格内容和边界之间添加空间,而不是在边界之外。
            【解决方案15】:

            我意识到这已经很晚了,但为了记录,您也可以使用 CSS 选择器来执行此操作(消除对内联样式的需要。)此 CSS 将填充应用于每一行的第一列:

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

            这将是你的 HTML,没有 CSS!:

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

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

            【讨论】:

              【解决方案16】:

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

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2017-07-27
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多