思路：在單個單元格內,通過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.效果圖