Add blank space on both sides of a table border?

See more:

HTML

HTML5

HtmlEditor

So I want to make a table that looks like this with only CSS/HTML.

______________
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|  ---------  |
|_____________|

I don't want the "border-bottom: dotted" to go all the way from the left border to the right border. I want it to be go only ~70% of the way. So there will be some white space between the left and right borders and some dots in the center of that.
Like this |(space)............(space)|

I have searched google without any results... Please help!

Here is my code:

<style>
table.mytable {
	font-family: Source Sans Pro;
	font-size:16px;
	text-align: center;
	color:#333333;
	border-width: 1px;
	border-color: #39B2FF;
	border-collapse: collapse;
	width: 100%;
}
table.mytable th {
	background:#39B2FF url('cell-blue.jpg');
	font-family: BEBAS;
	font-size:24px;
	color: #FFFFFF;
	border-width: 1px;
	padding: 16px;
	border-style: solid;
	border-color: #39B2FF;
}
table.mytable td {
	background:#FFFFFF url('cell-grey.jpg');
	border-width: 1px;
	cellpadding: 60px;
	padding: 45px;
	border-left:1px solid;
	border-right:1px solid;
	border-bottom:1px dotted ;
	border-bottom-width: 1px;
	border-color: #39B2FF;
}
</style>

<table class="mytable">
<tr>
	<th>Header START</th>
</tr>
<tr>
	<td>Text 1A</td>
</tr>
<tr>
	<td>Text 2A</td>
</tr>
<tr>
	<td>Text 3A</td>
</tr>
<tr>
	<td>Text 4A</td>
</tr>
<tr>
	<td>Text 5A</td>
</tr>
<tr>
	<td>Text6A</td>
</tr>
<tr>
	<td>Text7A</td>
</tr>
<tr>
	<td style="border-removednone;">>Text Last</td>
</tr>
<tr>
    <th>Header END →</th>
</table>

<pre lang="HTML">