RESPONSIVE TABLE

Run
<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML </title>
</head>
<style>
    table, th, td{
      border: 1px solid black;
      border-collapse: collapse;
	  
    }
	table {
	   width: 100%;
	}
	@media screen and (max-width: 500px) {
    .hide { display: none; }
}
</style>
<body>
    <h2> Responsive Table </h2>
	<div class="container">
		<table>
		  <tr>
			<th> #</th>
			<th class="hide"> Item 1 </th>
			<th > Item 2 </th>
			<th>Item 3</th>
			<th>Item 4</th>
			<th>Item 5</th>
			<th>Item 6</th>
			<th>Item 7</th>
			<th>Item 8</th>
		  </tr>
		  <tr>
			<th> cost </th>
			<td class="hide">500</td>
			<td>1000</td>
			<td>5000</td>
			<td>5000</td>
			<td>5000</td>
			<td>5000</td>
			<td>5000</td>
			<td>5000</td>
		  </tr>
		  <tr>
			<th> weight </th>
			<td class="hide">50</td>
			<td>60</td>
			<td>70</td>
			<td>70</td>
			<td>50</td>
			<td>50</td>
			<td>50</td>
			<td>50</td>
		  </tr>
		</table>
	</div>
	
</body>
</html>