随着移动设备的普及，越来越多的用户通过这些设备访问Web应用程序。然而，现有的桌面浏览器优化的Web应用在小屏幕设备上的表现往往不尽人意。数据表格在小屏幕上显示时，由于宽度过大，常常需要用户频繁地缩放和滑动屏幕，这严重影响了用户体验。为了解决这一问题，响应式Web设计应运而生，它提供了多种技术来构建可在任何屏幕尺寸上查看的Web页面。本文将介绍一种展示表格数据的响应式设计模式，并展示如何将其应用于ASP.NETWeb Forms中的GridView组件。
移动设备正变得越来越流行，用户期望在使用这些设备时获得良好的体验。遗憾的是，现有的项目可能没有足够的时间和资源来开发专门的移动客户端应用程序或专门的移动Web应用程序。在这种情况下，能做的最好的事情就是花些时间重构代码，并应用一些响应式Web设计技术。通过仔细规划，这些更改可以在最小的努力下大大改善用户体验。
为了解决小屏幕上宽数据表的问题，已经出现了几种模式。其中一种模式是保持前几列固定，而其他列则在下面流动。当表格加载时，优先列和左右两侧的操作按钮可见，用户可以根据需要水平滚动以查看其他列。这种模式在桌面和触摸屏移动设备上都表现良好。
可以使用名为"Responsive Table jQuery Plugin"的插件将这种模式应用于GridView。当触发响应行为时，GridView的外观不会发生显著变化，因此任何已经在桌面上使用Web应用程序的用户在小屏幕设备上也会感到熟悉。
在应用响应式设计技术时，希望控制页面在小屏幕设备上的显示方式。在页面头部添加viewport元标签，可以防止页面被缩放到移动浏览器的默认视口大小。这也将防止用户进行缩放，因此请确保设置合理的字体大小，以便不需要缩放。
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
还需要控制GridView在其容器宽度超出时的行为，因此需要防止它在页面的正常流中发生变化。如果表数据包含空白，则这些单元格将在表格宽度减小时换行，为了防止这种情况发生，有两种选择：
<asp:GridView runat="server" RowStyle-Wrap="false">
table th, table td {
white-space: nowrap;
}
将jQuery添加到页面中，然后添加jquery.responsivetable.min.js插件脚本：
<script src="scripts/jquery.responsivetable.min.js"></script>
在jQuery文档就绪函数内调用响应式表格插件，还可以设置一些选项：
$(document).ready(function() {
// 默认设置
$('.myTable1').responsiveTable();
// 自定义设置
$('.myTable2').responsiveTable({
staticColumns: 2,
scrollRight: true,
scrollHintEnabled: true,
scrollHintDuration: 2000
});
});
不需要设置任何预定义的断点，代码会自动检测GridView即将溢出其容器。
$(window).on('load', function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endUpdatePanelRequest);
});
function endUpdatePanelRequest() {
// 设置响应式GridView ...
}