手机端滚动左边横向固定上边纵向固定 css解决方案

最新推荐文章于 2024-06-25 16:31:06 发布

原创最新推荐文章于 2024-06-25 16:31:06 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

这篇博客详细介绍了如何使用HTML和CSS实现一个250px高度的滚动表格，包括thead、tbody、tfoot以及th和td的样式设定。表格包含35列和100行数据，使用了sticky定位以保持表头和第一列固定显示。

<template>
  <div class="report">
 
    <table>
        <thead>
            <tr>
                <th v-for="(n,i) of 35">字段 {{i+1}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(n,i) of 100">
                <td v-for="(m,j) of 35">{{j+1}}</td>
            </tr>
        </tbody>
    </table>
 
  </div>
</template>

<style lang="scss" scoped>
.report {
		overflow: auto;
		height:250px;
	   table{
		   display: table; 
		   min-width: 100%;
		   
		   tr       { display: table-row }
		   
		   thead    { display: table-header-group }
		   
		   tbody    { display: table-row-group }
		   
		   tfoot    { display: table-footer-group }
		   
		   col      { display: table-column }
		   
		   colgroup { display: table-column-group }
		   
		   caption  { display: table-caption }
	        th,td{
			  display: table-cell;
	          padding: 5px;
			  text-align: center;min-width: 88px;
	          font-size: 14px;
	          line-height: 25px;
	          text-align: center;
	          // padding: 9px 14px 8px;
	          border-top: 1px solid #e5e5e5;
	          border-right: 1px solid #e5e5e5;
	        }
	        th{
	          background-color: #eaf2fc;position: sticky;top:0px;
	        }
	        td{
	          background-color: #fff;
	        }
	 
	  tr:first-child{background-color: #fff;position: sticky;top:-2px;}
	        td:first-child{background-color: #fff;position: sticky;left:0px;}
	        th:first-child{position: sticky;left:0px;z-index: 666;}
	    }
	}
</style>