如何制作响应式表头？

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 -->