logo标签列表

CSS单元格边距

htmlcsscellmargincss-tables
123
在我的HTML文档中，有一个包含两列和多行的表格。如何使用CSS增加第一列和第二列之间的间距？我尝试将“margin-right: 10px;”应用于左侧的每个单元格，但没有效果。
这里有一个很好的CSS解决方案，最近更新：https://dev59.com/NnRB5IYBdhLWcg3wHkPi#21551008 - Asons
16个回答
2

解决方案

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

http://jsfiddle.net/MG4hD/


如您所见，我有一些非常棘手的问题... 但让它看起来好的主要关键是：

父元素(UL)：border-collapse: separate; border-spacing: .25em; margin-left: -.25em;
子元素(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; }
2

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

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

table td {
    padding-left: 20px;
}

注意，表格的宽度需要包括填充/边距的宽度。以上述内容为例，表格的可视宽度将为700px。

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

1
如果padding对您不起作用，另一个解决方法是添加额外的列并通过使用<colgroup>来设置宽度的margin。以上所有的padding解决方案都不适用于我，因为我试图给单元格边框本身加上margin，最终这就是解决问题的方法：
<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; }
这只是掩盖问题，而不是回答问题。通过这样做，没有人会学会如何正确地做。 - Mawg says reinstate Monica
1

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

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

这个解决方案已经发布了，不需要两个回答说同样的事情。 - Asons
1
根据Cian的解决方案，用边框代替外边距，我发现您可以将边框颜色设置为透明，以避免必须匹配背景颜色。在FF17、IE9和Chrome v23中有效。如果您不需要实际边框，这似乎是一个不错的解决方案。
1

你可以同时使用它们：

padding-right:10px;

padding-right:10%;

但最好使用%。
2
我点了赞，但你可能需要解释一下为什么使用“%”更好。 - Mawg says reinstate Monica
1
通常使用百分号（%）来实现响应式。 - Muhammad Awais
1
加一 - 或许你可以编辑你的答案来说明这一点？并不是每个人都会阅读评论。如果你想添加关于响应式设计的链接，那就更好了 :-) - Mawg says reinstate Monica
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接