如何制作响应式表头？

Question

我有这个表，但是当显示的大小时，最后一列的元素不适合整个表。我做错了什么？

大

中

小

我有

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

我整理了fiddle

Answer 1

标题中需要<meta name="viewport" content="width=device-width">。

然后使用：

＆＃13;

＆＃13;

@media screen and (max-width : 725px ){
	#id {}
	.class {}
}

＆＃13;

＆＃13;

＆＃13;

将max-width更改为您想要的内容。

Answer 2

不要为动作列指定百分比宽度。如果您为表格标题提供一个百分比，该百分比可以累计总数并且不会显示任何列，则所有基于百分比的列将占用尽可能多的空间。

https://jsfiddle.net/pkjbpsr7/1/

例如：

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

如果你需要占用一定的空间，你可以随时给它一个最小宽度：

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