twitter-bootstrap 如何在启用引导程序的 html 表的元素之间添加间距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31953085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add spacing between elements of bootstrap enabled html table?
提问by blue-sky
This fiddle: https://jsfiddle.net/DTcHh/10952/displays 8 table elements, but I'm unable to add spacing between each element.
这个小提琴：https: //jsfiddle.net/DTcHh/10952/显示 8 个表格元素，但我无法在每个元素之间添加间距。
I've tried :
我试过了 ：
cellpadding="3" cellspacing="3"
as well as:
也：
td:nth-child(2) {
padding-right: 20px;
}
but these options do not seem to have desired effect.
但这些选项似乎没有达到预期的效果。
<div class="center">
<div>
<table class="table table-bordered" cellspacing="1">
<tr>
<td class="col-md-3">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>
<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>
<div class="date">test</div>
</td>
<td class="col-md-3" col-md-offset-2>
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>
<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>
<div class="date">test</div>
</td>
<td class="col-md-3">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>
<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>
<div class="date">test</div>
</td>
<td class="col-md-4">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>
<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>
<div class="date">test</div>
</td>
</tr>
<tr>
<td class="col-md-3">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>
<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>
<div class="date">test</div>
</td>
<td class="col-md-3" col-md-offset-2>
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>
<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>
<div class="date">test</div>
</td>
<td class="col-md-3">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>
<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>
<div class="date">test</div>
</td>
<td class="col-md-4">
<div class="header"><a href="{{ module.hrefTitle }}" target="_blank">test2</div>
<div class="title truncated-anchors"><a title="{{module.title}}" href='test");'>test</a>
</div>
<div class="date">test</div>
</td>
</tr>
</table>
</div>
</div>
回答by akoinesjr
Try adding the following:
尝试添加以下内容：
table {
border-collapse: separate;
border-spacing: 1em;
}
回答by Luna
try adding this :
尝试添加这个：
table {
border-collapse:separate;
border-spacing:10px 10px;
}?????????????
回答by mattn73
simply add a <br/>in all the table th or td(first column).
只需<br/>在所有表 th 或 td（第一列）中添加一个。
<tr>
<td><br/>Firstname<span class="red">*</span></td>
<td><input type="text" id="fname" name="fname"/></td>
<td id="fnameError" class="red"> </td>
</tr>
<tr>
<td><br/>Lastname<span class="red">*</span></td>
<td><input type="text" id="name" name="name"/></td>
<td id="nameError" class="red"> </td></tr>
This work fine for me. :D
这对我来说很好。:D
