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>
  • 相关阅读:
    python(day1-11)
    如何进行测试管理
    为什么你参加了那么多培训,却依然表现平平?
    数据库总结
    为何大量网站不能抓取?爬虫突破封禁的6种常见方法
    re--读书笔记【转】
    re--findall 【转】
    re--参考手册
    bs4--官文--遍历文档树
    rhel6+apache2.4+mysql5.7+php5.6部署LAMP架构
  • 原文地址:https://www.cnblogs.com/littleboyck/p/11433639.html
Copyright © 2011-2022 走看看