當表格列數太多時,怎麽實現表格的橫向滾動
阿新 • • 發佈:2017-11-11
html cnblogs eight tab scroll table .cn div ext
效果:
要點:在表格外加一層div,div寬固定
html:
<div class="project-tests"> <table> <tr v-for="arr in projectTests" v-bind:key="arr[0]"> <td v-for="item in arr" v-bind:key="item">{{item}}</td> </tr> </table> </div>
postcss:
div.project-tests { width: 100%; overflow-x:scroll; & table { border-collapse:collapse; & tr { height: 40px; &:nth-child(odd) { background-color: #FAFAFA; } &:first-child{ background-color: #EEF1F6; } &:hover { background-color: #EEF1F6; } } & td { border: 1px solid #DFE6EC; padding:8px; white-space:nowrap; text-overflow: ellipsis; } } }
當表格列數太多時,怎麽實現表格的橫向滾動