Ignoring gaps in between table data - html

Question

I have a table and what I want is to not make the space between the content as big. This is what the page looks like right now:
So this is some of the code for the table (I'm not posting it all because it's repetitive, all the tags are closed at the end too).
I have tried changing the padding and margin and it doesn't work. This is the CSS:
/*styling the table for the add ons*/
table,
tr,
td,
input {
margin: 30px;
padding: 10px;
margin-right: 20px;
margin-left: 45px;
line-height: 1.4em;
font-size: 17px;
}
.pushRight {
position: relative;
left: 10px;
bottom: 75px;
}
<table style="width:100%">
<tr>
<td><label><input type="checkbox" name="example" value="Value"><span><b>Voice over artist</b>   €475</span>
<table>
<tr>
<td class="pushRight">If you require a voice artist for your video project<br>please select this option.</td>
</tr>
</table>
</td>
<td><label><input type="checkbox" name="example" value="Text"><span><b>Creative Concept</b>  €1200</span>
<table>
<tr>
<td class="pushRight">We are bursting with ideas, so if you don't have one of<br>your own please select this option.</td>
</tr>
</table>
</td>
</div></tr>
<tr><div class="secondRow">
<td><label><input type="checkbox" name="example" value="Value"><span><b>Script</b>   €850</span></label>
<table>
<tr>
<td class="pushRight">If you would like us to allocate our scriptwriter to your project<br>please select this option.</td>
</tr>
</table>
</td>
<td><label><input type="checkbox" name="example" value="Text"><span><b>Storyboarding</b>  €875</span>
<table>
<tr>
<td class="pushRight">It is not essential to storyboard every video project, <br>however if you would like to include this process,<br>please select this option.</td>
</tr>
</table>
</td>
</div></tr>

Answer 1

First of all, you have some divs that don't do much in your html(div with class second row), when you use tables, the tr tags define the rows automatically, so you don't have to put a div to say that's my first row etc...
Using a lot of margin, and padding everywhere will make your table look ugly depending on which browser you're using, i tried to reorganize your code and just added this in your css :
td{
padding : 20px
}
table{
margin: 0 auto;
}
All you have to do now is to play with the padding to change the space as you want. you can also change the width of the table if you want a bigger table.
Here's a jsfiddle :
https://jsfiddle.net/rfroq680/2/

Answer 2

I had this recently, you need to use border-spacing in css.
Try this:
table{
border-collapse:separate;
border-spacing:0 6px;
}
You'll get 6px between rows with the above code.
This should help too: https://www.w3schools.com/cssref/pr_border-spacing.asp