zoukankan      html  css  js  c++  java
  • 纵向表格转为横向表格

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>列表格转行表格</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <link rel="stylesheet" type="text/css" href="js/plugins/layui/css/layui.css" />
      <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
      <style>
          #tableId  th{
              display: block;
          }
          #tableId thead{
              float: left;
          }
          #tableId  tbody td,#tableId  tbody{
              display: block;
              overflow: hidden;
              white-space: nowrap;
            text-overflow: ellipsis;
          }
          #tableId  tbody{
              font-size: 0;
          }
          #tableId  tbody tr{
              display: inline-block;
               14.285714%;
          }
      </style>
    </head>
    <body>
       
       
       <div style="padding: 15px;">
               <table class="layui-table" id="tableId">
                       <thead>
                           <tr>
                               <th>header1</th>
                               <th>header2</th>
                               <th>header3</th>
                               <th>header4</th>
                           </tr>
                       </thead>
                       <tbody>
                           <tr>
                               <td>1ersf</td>
                               <td>2</td>
                               <td>3</td>
                               <td>4</td>
                           </tr>
                           <tr>
                               <td>8</td>
                               <td>7</td>
                               <td>6</td>
                               <td>5</td>
                           </tr>
                           <tr>
                               <td>8</td>
                               <td>7</td>
                               <td>6</td>
                               <td>5</td>
                           </tr>
                           <tr>
                               <td>8</td>
                               <td>7</td>
                               <td>6</td>
                               <td>5</td>
                           </tr>
                           <tr>
                               <td>8</td>
                               <td>7</td>
                               <td>6</td>
                               <td>5</td>
                           </tr>
                           <tr>
                               <td>8fdsfsfsfsdfs发生的范德萨</td>
                               <td>7</td>
                               <td>6</td>
                               <td>5</td>
                           </tr>
                           <tr>
                               <td>8</td>
                               <td>7</td>
                               <td>6</td>
                               <td>5</td>
                           </tr>
                       </tbody>
               </table>
       </div>
    </body>
    </html>
  • 相关阅读:
    airtest支持Cocos-Creator,SDK接入
    Python的getter和setter方法
    liunx常用命令
    liunx的vim常用命令收集
    django+atx+liunx的一些shell脚本
    django+airtest+atx部署liunx平台
    Android下的鉴权实现方案
    Mate20 pro实现H265 (HEVC)实时硬件编码
    OpenCV C++常用功能介绍
    Ubuntu16.04编译libjpeg-turbo库
  • 原文地址:https://www.cnblogs.com/littleboyck/p/11433639.html
Copyright © 2011-2022 走看看