How can I increase the space between tabular data?
I originally intended to upload an image, but this is not possible because I do not have a reputation yet of 10. So I will try to describe my problem. At the moment I am using bootstrap to put some style on the table, however once I do that the table data gets too close together and then I would prefer it to be. Is there a way to increase the number of spaces between tabular data?
The code looks like this:
#TableTotal{
font-weight: bold;
display: block;
}
<table class="table table-striped" id="TableTotal">
<tr>
<td>TOTAL PLAN</td>
<td>£1,200,000.00</td>
</tr>
<tr>
<td>TOTAL ACTUALS</td>
<td>£1400,090.267</td>
</tr>
<tr>
<td>TOTAL VARIENCE</td>
<td id="Positive">+£3,990,267.00</td>
</tr>
</table>
source to share
You can only add padding in the first column
Try:
#TableTotal td:first-child {
padding-right: 20px; /*Or how much space you need*/
}
#TableTotal {
font-weight: bold;
display: block;
}
#TableTotal td:first-child {
padding-right: 20px; /*Or how much space you need*/
}
<table class="table table-striped" id="TableTotal">
<tr>
<td>TOTAL PLAN</td>
<td>£1,200,000.00</td>
</tr>
<tr>
<td>TOTAL ACTUALS</td>
<td>£1400,090.267</td>
</tr>
<tr>
<td>TOTAL VARIENCE</td>
<td id="Positive">+£3,990,267.00</td>
</tr>
</table>
source to share
You add an attribute cellpadding="10"
to the table tag
<table cellpadding="10">
but it is not supported in html 5, you can use CSS to split instead
th, td {
padding: 10px;
}
source to share
You can use the property border-spacing
. In a split border model, it sets the distance between the horizontal and vertical borders of adjacent cells.
#TableTotal {
border-spacing: 20px 2px;
}
#TableTotal {
font-weight: bold;
display: block;
border-spacing: 20px 2px;
}
<table class="table table-striped" id="TableTotal">
<tr>
<td>TOTAL PLAN</td>
<td>£1,200,000.00</td>
</tr>
<tr>
<td>TOTAL ACTUALS</td>
<td>£1400,090.267</td>
</tr>
<tr>
<td>TOTAL VARIENCE</td>
<td id="Positive">+£3,990,267.00</td>
</tr>
</table>
source to share