Add padding to table (Maintain cell collapsed) - html

Question

I'm making a table with a border between each row, I've been trying to edit the table so the row borders don't touch the outer border of the table and I can't figure it out for the life of me. I feel like there's probably a solution that I have completely overlooked.
What I'd like it to look like:
What it looks like at the moment:

Answer 1

IF the borders are set to TD inner elements
tr td:first-child {
padding-left:25px;
}
tr td:last-child {
padding-right:25px;
}
Otherwise a nice way to do it would be to use a transparent table inside a
gray DIV that has the padding you need
.tableContainer{
padding:15px;
position:relative;
margin:0 auto;
background:#353033;
border:1px solid #000;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}
table{
color:#B3B3B3;
table-layout:fixed;
border-collapse:collapse;
width:100%;
}
td, th{
text-align:left;
padding:5px 0;
border-bottom: 1px solid #000;
}
/* --------------------- */
html, body{
height:100%;
}
body{
font: 16px/1 sans-serif;
color: #fff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6da5ce+0,9c7bac+50,ec8e99+100 */
background: #6da5ce; /* Old browsers */
background: -moz-linear-gradient(45deg, #6da5ce 0%, #9c7bac 50%, #ec8e99 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#6da5ce), color-stop(50%,#9c7bac), color-stop(100%,#ec8e99)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #6da5ce 0%,#9c7bac 50%,#ec8e99 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #6da5ce 0%,#9c7bac 50%,#ec8e99 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #6da5ce 0%,#9c7bac 50%,#ec8e99 100%); /* IE10+ */
background: linear-gradient(45deg, #6da5ce 0%,#9c7bac 50%,#ec8e99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6da5ce', endColorstr='#ec8e99',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
<div class="tableContainer">
<table>
<tr>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Text goes here</td>
<td>and here also</td>
</tr>
</table>
</div>

Answer 2

.tableContainer {
padding: 15px 0px;}
td, th {
padding: 5px 10px;}