Table

trying to remove the third column when it gets to 617px. The 4th column disapears after 768px.

by Athina

HTML

<table>
   <tr><th>Day</th><th>Time</th><th>Location</th><th>Focus</th></tr>       
   <tr><td>Monday</td><td>6-8</td><td>Hall B</td><td>Mixed</td></tr>
	 <tr><td>Tuesday</td><td>6-8</td><td>Hall B</td><td>Mixed</td></tr>
	 <tr><td>Thursday</td><td>7-9</td><td>Studio 1</td><td>Traditional</td></tr>
</table>

CSS

table{
	box-sizing:border-box;
	width:460px;
	margin:15px;
	display:block;
	border:double 7px;
	padding:10px;
	line-height:40px;
}
table tr{
	text-align:center;
}
table th{
	font-size:20px;
	width:100px;
}
table td{
	font-size:17px;
}
@media (max-width:768px){/*Extra-Small Screens*/
	table th:last-child,
	table td:last-child {
		display:none;
	}
	table{
		width:360px;
	}
}
@media (max-width:617px){/*Extra*/
	table{
		width:300px;
	}
}
@media (max-width:536px){/*Extra*/
	th:nth-last-child (2),
  td:nth-last-child (2){
		display:none;
	}
	table{
		width:170px;
	}
}