How to make table responsive

<style>
.tblResponsive
{
	width:100%;
}
.tblResponsive tr td
{
	border-bottom:solid 1px #e6e6e6;
	padding:5px;
}
.tblResponsive tr.tblHead td
{
	font-weight:bold;
}
@media only screen and (max-width: 480px) {

.tblResponsive tr.tblHead
{
	display:none;
}

.tblResponsive tr,
.tblResponsive td
{
	display:block;
}

.tblResponsive tr
{
	border-bottom:solid 5px #e6e6e6;
}
.tblResponsive tr td
{
	padding-left:50%;
}

.tblResponsive tr td:before
{
	content: attr(abbr);
    left: 5px;
    position: absolute;
    text-align: left;
    width: 45%;
	font-weight:bold;
}

}
</style>

<table class="tblResponsive">
	<tr class="tblHead">
		<td>Heading 1</td>
		<td>Heading 2</td>
		<td>Heading 3</td>
		<td>Heading 4</td>
		<td>Heading 5</td>
		<td>Heading 6</td>
		<td>Heading 7</td>
		<td>Heading 8</td>
		<td>Heading 9</td>
		<td>Heading 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>					
</table>