在我使用 twitter bootstrap 的元素中,有时我需要为 Table
标签提供填充或边距。
所以我编写了这样的代码:
#table-parent {
padding-top: 50px; /* <---- Padding that moved down the hole Table */
}
td { /*****************************/
padding: 10px; /*****************************/
text-align: center; /**** JUST THE CSS STYLES ****/
border-left: 1px #575757 solid; /**** NOT IMPORTANT ****/
border-right: 1px #575757 solid; /*****************************/
} /*****************************/
/**** OPTIONAL ****/
/*****************************/
tr:nth-child(1) { /*****************************/
background: silver; /*****************************/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="table-parent">
<table class="table table-striped">
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
<tr>
<td>Value A</td>
<td>Value B</td>
<td>Value C</td>
</tr>
<tr>
<td>Value AA</td>
<td>Value BB</td>
<td>Value CC</td>
</tr>
</table>
</div>
你看我填充了 div
,它是 table
的父级。
但我不喜欢这样...
我想直接给 table
标签填充。像这样:
table {
padding-top: 50px;
}
td { /*****************************/
padding: 10px; /*****************************/
text-align: center; /**** JUST THE CSS STYLES ****/
border-left: 1px #575757 solid; /**** NOT IMPORTANT ****/
border-right: 1px #575757 solid; /*****************************/
} /*****************************/
/**** OPTIONAL ****/
/*****************************/
tr:nth-child(1) { /*****************************/
background: silver; /*****************************/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
<tr>
<td>Value A</td>
<td>Value B</td>
<td>Value C</td>
</tr>
<tr>
<td>Value AA</td>
<td>Value BB</td>
<td>Value CC</td>
</tr>
</table>
最佳答案
如果你想为一个table
使用padding
,你应该设置border-collapse: separate;
。
table {
padding-top: 50px;
border-collapse: separate!important;
}
td { /*****************************/
padding: 10px; /*****************************/
text-align: center; /**** JUST THE CSS STYLES ****/
border-left: 1px #575757 solid; /**** NOT IMPORTANT ****/
border-right: 1px #575757 solid; /*****************************/
} /*****************************/
/**** OPTIONAL ****/
/*****************************/
tr:nth-child(1) { /*****************************/
background: silver; /*****************************/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
<tr>
<td>Value A</td>
<td>Value B</td>
<td>Value C</td>
</tr>
<tr>
<td>Value AA</td>
<td>Value BB</td>
<td>Value CC</td>
</tr>
</table>
关于html - 如何在 Bootstrap 中为 Table 标签添加填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42874098/