首页 > 其他分享 >table 横向滚动

table 横向滚动

时间:2023-11-03 10:55:33浏览次数:588  
标签:index 滚动 color 横向 width table Document border

<!doctype html>Document

12345
1 2 3 4 5
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="widtd=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div {
      width: 500px;
      overflow: auto;
    }
    th {
      min-width: 200px;
      /* z-index: -1; */
    }
    td {
      text-align: center;
      /* z-index: -1; */
    }
    .name {
      position: sticky;
      left: 0px;
      background-color: lightpink;

      /* z-index: 0; */
    }

    p {
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-top-color: #f60;
    }
  </style>
  <body>
    <div>
      <table border="1" cellspacing="0">
        <tr>
          <th class="name">1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
        </tr>

        <tr>
          <td class="name">1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </table>
    </div>

    <p></p>
  </body>
</html>

  

 

标签:index,滚动,color,横向,width,table,Document,border
From: https://www.cnblogs.com/conlin/p/17807108.html

相关文章

  • Guava中的增强Map - Table、BiMap、Multimap、RangeMap、ClassToInstanceMap
    1.简介  日常开发中使用Map时经常会遇到很多复杂的处理场景,例如:多个键的Map、不仅可以根据键获取值也可以根据值获取键且不用遍历、重复键的Map、数字等范围内映射相同的值、内存中缓存对象等,Guava提供了以上场景的解决方案。场景解决方案具体实现多个键的MapTabl......
  • 面试题: 前端处理滚动穿透这个顽疾
    诚如你所知:滚动穿透是指在移动端滑动页面的过程中,页面滚动受到了触摸事件的干扰,导致无法流畅地滚动,这主要是由于事件冒泡造成的。解决方法如下:监听touchmove事件,阻止默认行为监听touchmove事件,阻止事件的默认行为,防止事件冒泡到父元素上。禁止滚动可以通过over......
  • position sticky table 中不生效问题
    1. 确认浏览器版本支持https://caniuse.com/?search=sticky constcssSupport=(attr:any,value:string)=>{constelement=document.createElement('div')if(attrinelement.style){element.style[attr]=valuereturnel......
  • 数据结构与算法 | 哈希表(Hash Table)
    哈希表(HashTable)在二分搜索中提到了在有序集合中查询某个特定元素的时候,通过折半的方式进行搜索是一种很高效的算法。那能否根据特征直接定位元素,而非折半去查找?哈希表(HashTable),也称为散列表,就是一种数据结构,用于实现键-值对的映射关系。它通过将键映射到特定的值(哈希值)来实现......
  • vxe-table树状表格的实现(v3.5.9)
    这段时间改造了一个报表,需要在之前的基础上添加一个分类的维度,之前的报表样子找不到了,应该是用a-table写的普通表格,现在前端表格统一转到vxe-table上去了,记录一下开发树形表格过程中的坑。<vxe-tableborderid="xTable1"ref="xTable1"class="xTable1":column-con......
  • QT高级(1)QTableView自定义委托集合,一个类实现若干委托
    @目录1同系列文章2功能3源码1同系列文章QT中级(1)QTableView自定义委托(一)实现QSpinBox、QDoubleSpinBox委托QT中级(2)QTableView自定义委托(二)实现QProgressBar委托QT中级(3)QTableView自定义委托(三)实现QCheckBox委托并且将QCheckBox居中QT中级(4)QTableView自定义委托(四)实现QDateTi......
  • MySQL的create table as 与create table like区别
    一、区别对于mysql的复制相同表结构方法,有createtableas和createtablelike两种:createtablet2asselect*fromt1;as创建出来的t2表(新表)缺少t1表(源表)的索引信息,只有表结构相同,没有索引。createtablet2liket1;like创建出来的新表包含源表的完整表结构和索引......
  • Tableau-漏斗图
    漏斗图.xlsx1.数据2.画图1.柱状折线式在右边可以快速调整顺序添加折线并与柱状图双轴调整同步轴并编辑轴将左边的轴倒序在每个折线功能区添加标签2.区域折线式和上面的流程一样,但只用折线然后倒序并选择区域......
  • python sqlalchemy 动态设置表名__tablename__,一个model对应多个table
    fromsqlalchemyimportcreate_engine,Column,BigInteger,Stringfromsqlalchemy.ext.declarativeimportdeclarative_basefromsqlalchemy.ormimportsessionmakerbase=declarative_base()engine=create_engine("postgresql://postgresadmin:[email protected]......
  • el-table选中效果及动态修改
    项目有个需求,是点击关联账户,弹窗显示已经关联的,而且表格上还要勾上效果: 这里的交互有两条线:1.勾选表格内容,上方标签显示和隐藏2.删除上方标签,表格中的该条数据去除选中效果......