原生table标签在tbody添加滚动条

最新推荐文章于 2024-05-09 10:37:05 发布

SmallGirlYang

最新推荐文章于 2024-05-09 10:37:05 发布

阅读量1k

点赞数 7

文章标签： javascript 前端

本文链接：https://blog.csdn.net/SmallGirlYang/article/details/134647267

版权

less

     .table-wrapper {
        width: 100%;
        height: calc(~"100% - 30px");
        table {
          width: 100%;
          height: 100%;
          border-collapse: collapse;
          tr {
            width: 100%;
            display: block;
            td, th  {
              padding: 5px;
            }
          }
          thead tr {
            line-height: 20px;
            th {
              padding: 0 10px;
            }
          }
          tbody tr:nth-child(2n + 1) {
            background: rgba(255,255,255,.2);
          }
        }
        thead {
          display: block;
          height: 30px; /* 控制最大高度和出现滚动条的条件 */
        }
        tbody {
          display: block;
          height: calc(~"100% - 30px");
          overflow-y: auto; /* 控制垂直滚动条出现 */
        }
      }

html

 <div class="cardContent table-wrapper" id="tableDom">
 </div>

js 动态创建表格数据

// 表格数据
export const tabeColumn = [
  {label: '终端号', width: '80px', code: 'number'},
  {label: '经度', width: '50px', code: 'lon'},
  {label: '纬度', width: '50px', code: 'lat'},
  {label: '时间', width: 'calc(100% - 180px)', code: 'time'},
]
export const tableData = [
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
  {number: 'NF90034', lon: 16.2529, lat: 39.5420, time: '2023-12-22'},
]

createTableDom()

// 创建list内容
  function createTableDom () {
    const tableData = tableData;

    const tableColumn = tabeColumn
    const tableDom = document.getElementById('tableDom');
    let tHeadeR = ''
    tableColumn.forEach(col => {
      let style = 'width:' + col.width
      tHeadeR += `<th style="${style}">${col.label}</th>`
    })
    let tbodyR = ''
    tableData.forEach(item => {
      let s = ''
      tableColumn.forEach(col => {
        let style = 'width:' + col.width
        s += `<td style="${style}">${item[col.code]}</td>`
      })
      tbodyR += `<tr>${s}</tr>`
    });
    tableDom.innerHTML = `
    <table><thead><tr>${tHeadeR}</tr></thead><tbody>${tbodyR}</tbody></table>
    `;
  }