https://stackoverflow.com/questions/716442
-
23-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
在我的HTML文档，我有两列和多个行的表。我怎样才能提高空间与CSS的第一和第二列之间？我试着将“保证金权：10px的;”每个在左手侧上的细胞，但是没有效果。
解决方案
这个应用你的第一个<td>：
padding-right:10px;
<强> HTML示例：的
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
其他提示
一句警告：虽然padding-right可能会解决您的特定（视觉）的问题，这是不添加表格单元格间距的正确方法。什么padding-right确实为一个单元类似于它做什么其他大多数元素：它增加了细胞内空间的。如果细胞不具备这马脚边框或背景颜色或别的东西，这可以模仿设置单元格之间的空间的效果，而不是其他。
正如有人指出，余量规格为表格单元忽略：
内部表元素产生 矩形框的内容和 边界。细胞有填充为好。 内部表元素没有 边距。
什么是“正确”的方式呢？如果您正在寻找替换表的cellspacing属性，然后border-spacing（与border-collapse禁止）的替代品。然而，如果每单元“利润”是必需的，我不知道如何可以使用CSS来实现正确。我可以想到的唯一劈是使用padding如上，避免了细胞的任何样式（背景颜色，边框等），而使用在细胞内div容器来实现这样的造型。
我不是一个CSS专家，所以我可能是错在上面（这将是巨大的，知道了！我太想一个表格单元格边距CSS解决方案）。
干杯！
如果您不能使用填充（例如你在TD边框）试试这个
table {
border-collapse: separate;
border-spacing: 2px;
}
我意识到这是相当慢半拍，但备案，也可以使用CSS选择器来做到这一点（省去了内联样式的需要。）这个CSS应用于填充每一行的第一列：
table > tr > td:first-child { padding-right:10px }
这将是你的HTML，CSS SANS！
<table><tr><td>data</td><td>more data</td></tr></table>
这使得更优雅的标记，特别是在你需要做大量的CSS特定格式的情况下。
利润率不会对单个细胞遗憾的是工作，但是你可能要放空间...之间的另一种选择是使用边框搭配同色为背景的两个单元之间添加额外的列...
您可以简单地这样做：
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>
没有CSS是必需的:)这10px的是你的空间。
尝试padding-right。不允许你把margin细胞之间的。
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
使用的边界崩溃：独立; 我没有工作，因为我只需要不上台面的两侧的表细胞之间的余量
我想出了下一个解决方案：
- 的 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>
该解决方案工作td的需要都border和padding的造型。结果
（测试铬32，IE 11，火狐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
火狐现在支持它没有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或元素添加在第二列style='padding-left:10px'和应用样式。这种方式可以实现更大的空间的错觉。
如果你有表格的宽度的控制中，插入一个填充左上的所有表格单元格，并插入一个负容限留在整个表。
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}
请注意，表中的宽度需要包括填充/余量宽度。使用上述作为一个例子，该表的视觉宽度将是700像素。
这是不是最好的解决办法，如果你使用你的表格单元格边框。
解
我发现最好的方式来解决这个问题是试错的组合和阅读什么写在我面前：
，点击 正如你可以看到我有一些非常棘手的东西怎么回事...但得到这个看起来不错的主要是起脚：
父元素（UL）：边界崩溃：独立;边框间距：.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; }
以下设置代替保证金的边界慈安的解决方案，我发现你可以边框颜色设置为透明，以避免颜色匹配背景。工程在FF17，IE9，Chrome的V23。似乎是一个体面的解决办法只要你不也需要一个实际的边界。
<!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>
使用填充是不这样做的正确的方式，它可能改变它的外表，但它是不是你想要的。这样可以解决您的问题。
您可以同时使用其中的一部分：
padding-right:10px;
padding-right:10%;
但最好是％
使用如果填充信息并不为你工作，另一种解决办法是添加额外列，并使用<colgroup>通过宽度设置的余量。上述填充方案没有一个是为我工作，因为我是想给小区边界本身保证金，而这也正是到底解决了这个问题：
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>
样式表单元的使用的边界：第n个孩子，使得第二和第三列显示为一个单一的柱
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; }
