Html 在所有设备上正确显示表格

我有这个代码来生成一个表。问题是它在手机和平板电脑（Nexus4，Nexus7，…）上被破坏。我认为当表格缩放到更小的视口时，它应该有一个布局。如何在所有设备上正确显示表格

从中获取的表布局

$（文档）.ready（函数（）{
});
.div表{
显示：表格；
宽度：自动；
边框间距：5px；/*单元格间距：IE对此的支持较差*/
}
.div表格标题{
显示：表格行；
宽度：自动；
明确：两者皆有；
}
.div表行{
显示：表格行；
宽度：自动；
明确：两者皆有；
}
.div表列{
float:left；/*修复错误浏览器*/
显示：表格列；
宽度：96px；
溢出：隐藏；
文本对齐：居中；
垂直对齐：中间对齐；
}
.div表.div表行：第n个子项（偶数）{
背景色：#FFE9CB；
}
.div表.div表行：第n个子项（奇数）{
背景色：#FFF；
}
.div表.div表行{
边框顶部：1px实心#FFB312；
边框底部：1px实心#FFB312；
}
.skillLabel{
文本对齐：右对齐；
}
不知道
不足一年
一年以上
2年以上
三年以上
JAVA
PHP
Javascript
MySQL

检查更改是否有帮助

更改

边框间距：0用于
.div表

并移除
浮动：左；宽度：96px；溢出：隐藏
用于
.div表格列
并将
显示更改为
表格单元格

.div-table-col {
        /*float:left;        
        width:96px;
        overflow: hidden;*/

        display:table-cell;
        text-align: center;
        vertical-align: middle;
    }

这是一个百万美元的问题，我的朋友。你需要响应引导css。我同意Nikhil的观点，去探索吧
.div-table-col {
        /*float:left;        
        width:96px;
        overflow: hidden;*/

        display:table-cell;
        text-align: center;
        vertical-align: middle;
    }