Html CSS技巧';s响应数据表(带内联编辑模式)显示问题
我正在使用CSS Tricks的Chris编写的指南()创建一个响应表。我还尝试将内联编辑添加到表中Html CSS技巧';s响应数据表(带内联编辑模式)显示问题,html,css,angularjs,datatable,responsive-design,Html,Css,Angularjs,Datatable,Responsive Design,我正在使用CSS Tricks的Chris编写的指南()创建一个响应表。我还尝试将内联编辑添加到表中 响应功能在移动屏幕模式下工作。 在线编辑在进入移动屏幕模式之前工作。 当在移动屏幕模式下启用内联编辑时,一切都会变得很糟糕。 主要CSS: /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table heade
- 响应功能在移动屏幕模式下工作。
- 在线编辑在进入移动屏幕模式之前工作。
- 当在移动屏幕模式下启用内联编辑时,一切都会变得很糟糕。
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
#demoTable td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
这是因为当您编辑代码时,
td
具有col-xs-12
div,其具有float:left
,因此td
没有获得正确的高度
请尝试以下代码:
@media screen only and (max-width:767px){
#demoTable td .col.col-xs-12 {
float: none;
padding: 0;
}
}
你真棒!非常感谢。我很高兴这有帮助:)