table表格

骑猪看日落 2023-01-16 02:58 150阅读 0赞

一、table的table-layout属性：

1、table-layout: fixed;表示平均分配。列数不定，宽度自动平均分配：

table {
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          table-layout: fixed;
        }

2、table-layout: auto自适应

二、两个表格拼接：table-layout: fixed;平均分配可以使两个表格对齐。如我上面一个表格，下面一个表格限制高度，超出加滚动条：

<table>
              <tr class="tr-title">
                <td>排名</td>
                <td>部门/区域</td>
              </tr>
              <tr v-for="(item, index) in data1" :key="index">
                <td>{
       { index+1 }}</td>
                <td>{
       {item.area}}</td>
              </tr>
            </table>
            
            <div class="scroll-div">
              <table>
                <tr v-for="(item, index) in data2" :key="index">
                  <td>{
       { index+1 }}</td>
                  <td>{
       {item.area}}</td>
                </tr>
              </table>
            </div>
    
    
    
    
     table {
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          table-layout: fixed;
          text-align: center;
          tr {
            border-bottom: 1px solid rgb(214, 211, 211);
            td {
              padding: 2px 0px;
              color: #f59a23;
              //overflow-x: auto;
              text-overflow: ellipsis; /* 加上，显示省略号*/
              white-space: nowrap;
              overflow: hidden;
            }
            td:hover {
              /* 鼠标滑过  显示隐藏的内容  伴有横向的滚动条 */
              overflow: auto;
              text-overflow: clip;
            }
          }
       }
    
     //限高
        .scroll-div {
          width: 100%;
          height: 500px;
          overflow-y: auto;
    
          //字体样式
          table {
            tr {
              td {
                font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
                color: #7f7f7f;
                // white-space: nowrap;
                // overflow-x: auto;
              }
            }
          }
        }