How to make a responsive table header? - html

Question

I have this table, but elements at last column don't fit the entire table when display is in a big size. What am I doing wrong?
Large
Medium
Small
I have
<div class="panel-body">
<table class="table mb30" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th width="5%">#</th>
<th width="30%">Site Name</th>
<th width="40%">Site URL</th>
<th width="25%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name</td>
<td>URL</td>
<td>Action</td>
</tr>
</tbody>
</table>
</div>
I've put together a fiddle

Answer 1

You need <meta name="viewport" content="width=device-width"> in the header.
then use:
#media screen and (max-width : 725px ){
#id {}
.class {}
}
change max-width to what you want.

Answer 2

Don't give the action column a percentage width. If you give table headers a percentage that adds up to the total and leave out a column, all the % based columns will take up as much room as they have available.
https://jsfiddle.net/pkjbpsr7/1/
For example:
<tr>
<th width="5%">#</th> <!-- This column and the next two will fill the space available. -->
<th width="30%">Site Name</th>
<th width="65%">Site URL</th>
<th>Action</th> <!-- This one will just chill off to the side and only take up as much room as it has width -->
</tr>
If you need it to take up a certain amount of space, you can always give it a min-width:
https://jsfiddle.net/pkjbpsr7/4/
<th width="5%">#</th>
<th width="30%">Site Name</th>
<th width="65%">Site URL</th>
<th id="min-width">Action</th> <!-- This will take up 100px per it's min-width -->