c# - 我如何停靠 asp.net : table to my web page so it (the table dock) dynamically adjusts to browser width?

Question

1. 我的问题:

我有一个流畅的 CSS 设计布局，效果非常好，尽管 我的 asp.net: table 把事情搞砸了!当用户减小浏览器大小或者如果用户通过移动设备登录时，我的表格将自行扩展到它的实际宽度，大约为 1000 像素。

1. 我尝试做的事情:

我试过使用 javascript 代码来解决这个问题，它只有在我指定最大宽度时才有效，但我需要一种方法让这段代码知道屏幕的当前最大宽度

1. 我使用的代码:

脚本:

   <script language="javascript" type="text/javascript">

       $('#dvTableDock').width($('#dvPageWidth').width());


    </script>

然后我创建一个样式:

.TableDock
    {
        overflow-x: auto;
        overflow-y: auto;
        width: 870px; // Need to dynamically specify width here
        height:200px;
        padding: 0 0 17px 0;
    }

然后我添加一个获取屏幕宽度的 div，并将样式和脚本应用于包装表格的另一个标签:

<div id="dvScreenWidth" visible="false">
</div>
<div class="TableDock" id="dvTableDock">
 //table in here
</div>

我想要的是让 dock 知道什么时候显示水平滚动，即当屏幕宽度变得小于 1000px 并且表格开始延伸到页面之外时。

我真的希望我在这个问题上已经说清楚了，但请告诉我还需要哪些其他信息来帮助我。感谢任何帮助或纠正我的错误的人。

Answer 1

不要使用固定宽度(即像素单位)，而是使用百分比。

.TableDock
    {
        overflow-x: auto;
        overflow-y: auto;
        width: 95%;
        height:200px;
        padding: 0 0 17px 0;
    }