你们知不知道，现在做网页设计，人家都爱用那个什么响应式布局了！因为现在人手一部手机，电脑更是满大街都是，看网页也有各种各样的方式。想要你的网页适合所有屏幕大小，那就得好好琢磨布局了。特别是表格这种好用的数据展示工具，怎么在响应式设计里既好看又管用？别急这篇文章来给你支招——告诉你如何用CSS搞定它，让你的表格无论是大屏还是小屏，都能美美的呈现出来！
设置基本样式
搞定响应式表格的关键就是搞清楚它长啥样儿。然后，把表格的定位方式改成相对就行了。再加上给表格的小崽子们（td元素）设置个比例值来控制大小。这样不论屏幕多大，表格都能自动调节，既不会占满屏幕，也不会跑出边框。
记得要调调表格边线和背景颜色滴，弄个好看点儿的色彩搭配再加点儿细细的线，网页就变得又美观又易读！
设置响应式表格布局
我们以前那个旧电脑，表格太长太密，字太小看不清。不过现在好，响应式设计让咱们可以把表格变成竖的，一行一格，一目了然！
<pre class='brush:css;toolbar:false;’>.container {
position: relative;
}
table {
width: 100%;
}
用CSS的@media功能看看屏幕尺寸，根据显示效果对样式进行调节超方便喔！举个例子，如果屏幕宽度低于600像素，那表格就要变成平板式元素，这样才能竖着排列；而单元格也得变成内联平板式元素，这样才能横着放。
设置表格样式细节
别光想着好看了，表格里的字号和行距也得搞好点。根据你手机或电脑屏幕大小选择合适的字号和行高，看着舒服、用起来顺手才最重要！
手机上看网页费劲？把单元格的间距缩小就能搞定！网页内容一下子变得清晰明了！方法超级简单，改动一下padding或者margin的数值就好。
@media screen and (max-width: 600px) {
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
tr {
margin-bottom: 10px;
}
th,
td {
display: inline-block;
}
th {
font-weight: bold;
}
}
优化用户体验
所以，别老纠结那些样式和布局！想想我们的小用户们，他们在手机上操作单元格时得多舒服呀。试试用CSS搞点儿新鲜玩意儿，让使用过程变得有趣些，这不就提升了用户体验！
看长文要点嗷，重要信息别错过！就跟翻书似的，瞄瞄标题或栏头，重点就清楚。这个时候就得用上CSS里必备神器——position:sticky;属性哟～
兼容性处理
做响应式表格布局时，要记得那些旧版浏览器有可能看不懂CSS3的新特性和数值，所以编码时要特别注意！
@media screen and (max-width: 600px) {
/* Other styles */
th,
td {
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
}
搞定浏览器兼容？我们可以试试CSS的小窍门儿，比如添加前缀或者其他神奇的技术，再配合那些好用的预处理和后处理工具，让问题迎刃而解！
结语
只要学会这几个简单的技巧，你会发现CSS简直太容易了～搞个响应式表格布局，瞬间就能搞定，不论在手机还是平板上都毫无压力。还等什么？快来试试看，掌握了这些技能，以后就业前途大大的！
评论0