表格斜线 特殊表格 固定列等

<table cellspacing="0" cellpadding="0" border="1" style="width: 100%">
        <thead>
          <tr>
            <th colspan="2">
              <div style="height: 50px;position: relative;overflow:hidden;">
                <span style="position: absolute;top:5px;right: 10px;">日期</span>
                <span style="position: absolute;bottom:5px;left:10px;">员工</span>
                <span style="transform: rotateZ(16deg);transform-origin: left top;color: red;position: absolute;left: -5px;top: -1px;width: 110%;border-top: 1px solid red;"></span>
              </div>
            </th>
            <th>9-20</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="2">王xx</td>
            <td>33</td>
          </tr>
        </tbody>
      </table>
      这种适合 表头斜线单元格不需要两种背景的。不需要 做c3兼容的

如下图

<table cellspacing="0" cellpadding="0" border="1" style="width: 100%;margin-top: 20px;">
        <thead>
          <tr>
            <th style="width: 6rem">
              <div class="cell" style="width: 6rem;height:2rem;position: relative;line-height: 23px;padding-left: 10px;padding-right: 10px;">
                占位
                <div class="table-header-title" style="position: absolute;top: 0;left:0;right:0;bottom:0;border-top: 1.9rem #199fff solid;border-left: 6rem #ff8838 solid;color: white;font-weight: 600;">
                  <b style="position: absolute;top: -1.7rem;left: -1.6rem;font-size: 13px;">日期</b>
                  <em style="position: absolute;top: -1.1rem;left: -5.5rem;font-size: 13px;">员工</em>
                </div>
              </div>
            </th>
            <th>9-20</th>
            <th>9-21</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>王xx</td>
            <td>33</td>
            <td>35</td>
          </tr>
        </tbody>
      </table>
      其中：
      border-top: 1.9rem #199fff solid; /*上边框宽度等于表格第一行行高*/
      border-left: 6rem #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/

如图：

固定左侧一列，表格内容横向超出 scoll展示
      <div class="fixedtable-wrap">
        <table id="fixedtable">
          <thead>
            <tr>
              <th class="fixed-cell"><div class="cell">日期/编号</div></th>
              <th></th>
              <th><div class="cell">9-2-1</div></th>
              <th><div class="cell">9-2-3</div></th>
              <th><div class="cell">9-20</div></th>
              <th><div class="cell">9-20</div></th>
              <th><div class="cell">9-20</div></th>
              <th><div class="cell">9-20</div></th>
            </tr>
          </thead>
         <tbody>
            <tr>
              <td class="fixed-cell"><div class="cell">2019-08-23</div></td>
              <td><div class="cell"></div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
            </tr>
            <tr>
              <td class="fixed-cell"><div class="cell">2019-08-24</div></td>
              <td><div class="cell"></div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
              <td><div class="cell">9-20</div></td>
            </tr>
          </tbody>
        </table>
      </div>

css：
.fixedtable-wrap{
    margin-top:20px;
    width: 100%;
    overflow-x: scroll;
  }
  #fixedtable{
    empty-cells: show;
    border-collapse: collapse;
    border:1px solid #dfe6ec;
    background: #fff;
    thead{
      background: #eef1f6;
    }
    thead th,tbody td{
      padding: 0 10px;
    }
    tr{
      border-bottom: 1px solid #dfe6ec;
    }
    .cell{
      width:130px;
      text-align:center;
    }
    .fixed-cell{
      width:130px;
      background-color: #eef1f6;
      position:absolute;
      left:0px;
      border-right: 1px solid #dfe6ec;
      border-left: 1px solid #dfe6ec;
    }
  }

这种布局的话，也可以用两块左右布局，左边布局是左侧列 浮动定宽 用一个table，右边自动平铺用table实现 ，需要在动态加载数据的时候，保证一行同高就行，可以用 offsetHeight，在渲染完dom树之后进行 domFixed domBody元素的 高相等