In my projects that I use twitter bootstrap some times I need to give padding or margin to a Table
tag .
So I code something like this :
#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>
You see I padding the div
that is the parent of table
.
But I don’t like this …
I want to give padding directly to the table
tag . Something like this :
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>
But this isn’t working . Can you help ?
2
Answers
Use
margin-top: 50px;
instead ofpadding-top: 50px;
if you want to use
padding
for atable
you should setborder-collapse: separate;
on it.