And yes, I will read about using bootstrap tables. Sounds like a good idea, but I still want to get what I have working first.
Firstly you should NOT/NEVER be using Bootstrap v3 on a new build website, that verison is years old and outdated. The current stable version is v4 and there is a v5 version which has just recently been released and is fairly stable I believe.
To answer your sepecific questions -
By default Bootstrap v3 and v4 will removed the default spacing in ALL table cells.
Bootstrap v4 does it with the following css selector:
table {
border-collapse: collapse;
}
Bootstrap v3 (currently the version you are using) removes the <hr> tag completley from view by setting the height to 0, whilst Bootstrap v4 retains the <hr> tag but sets its default color to gray with the following css selector:
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
You can change the color of the <hr> tag (if you are using Bootstrap v4) by over-riding the css in a dedicated stylesheet (DO NOT ever alter the default Bootstrap css file):
hr {
border-top: 1px solid red!important;
}
To re-instate the table cell spacing you are meant to use the built in Bootstrap helper classes:
In your particular table case and using Bootstrap v4 you would add some vertical cell spacing - class="py-1" as shown below:
<table width="600" border="0" cellspacing="10" cellpadding="0">
<tbody>
<tr>
<td width="150" class="py-1">nono</td>
<td width="150">pnm</td>
<td width="150">pmomi</td>
<td width="150">i p</td>
</tr>
<tr>
<td width="150" class="py-1">;luyb </td>
<td width="150"> louo</td>
<td width="150">'po po </td>
<td width="150">p o'ip </td>
</tr>
<tr>
<td width="150" class="py-1">on7898b7</td>
<td width="150">'ooinu</td>
<td width="150"> op' iop </td>
<td width="150"> 'po </td>
</tr>
</tbody>
</table>
Key here is to decide if you are going to use Bootstrap or not and then take advantage of its built in css classes if you do! Take some time out to learn the Bootstrap default helper classes.
Yes, you can certainly mix and match Bootstrap and your own code/css but you need to be aware of how Bootstrap works and how to overide its many css classes.
Personally I think its bloated over complicated junk with over 8000 lines of css unminified, the majority of which you will never ever need, lying there doing nothing, whilst eating up critical load-time, especially on mobile devices. Most 'developers', especially amatuers where the majority of Bootstrap builds are used WILL NEVER optimise the css to deploy just what is needed, which is possible.
Of course its down to the individual to decide their own path - I'm just laying bare some true facts and figures which most Bootstrappers prefer you not to know.
Hope the above helps you in some way, whether you continue with Bootstrap or not.
AdChoices