表格单元平分线绘制

思路：在单个单元格内,通过canvas将显示的内容进行划分

1.html代码

<table cellspacing="0" cellpadding="0" border=1>
      <tr>
          <th class="first">
              <div class="title1">水果</div>
              <div class="title2">季节</div>
          　　 <canvas id="drawTh"></canvas>
          </th>
          <th>苹果</th>
          <th>梨子</th>
      </tr>
      <tr>
          <td>秋季</td>
          <td>100</td>
          <td>200</td>
      </tr>
      <tr>
          <td>冬季</td>
          <td>10</td>
          <td>20</td>
      </tr>
</table>

2.css代码

        table{
            width: 400px;
            height: 120px;
　　　　　　　text-align: center;
　　　　　}

        .title1,.title2{
            position: absolute;
            display: flex;
        }
        .title1{
            top: 20%;
            right: 15%;
        }
        .title2{
            bottom: 20%;
            left: 15%;
        }
        #drawTh{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }
        th[class=first]{
            height: 40px;
            width: 100px;
            min-width: 100px!important;
            position: relative;
        }

3.js代码

   //绘制中分线
    var context = document.getElementById('drawTh').getContext('2d');
    console.log(context)
    // 设置线条的颜色
    context.strokeStyle = '#808080';
    // 设置线条的宽度
    context.lineWidth = 5;
    // 绘制直线
    context.beginPath();
    // 起点
    context.moveTo(0, 0);
    // 终点
    context.lineTo(420, 207);
    context.closePath();
    context.stroke();

4.效果图