思路很简单,第一行除了第一个单元格其余合并2行单元格,文字一个右浮动一个左浮动。获取到单元格左上角坐标与右下角坐标,铺一个canvas,z-index为-1;两点之间画线就ok了。
html部分
<table class="testTa" style="width: 94%;font-size: 0.9rem;line-height: 30px;">
<tr>
<th class="leri" style="border-bottom:none;text-align:right;"><span style="margin-right: 10px;">内容</span></th>
<th rowspan="2">1</th>
<th rowspan="2">2</th>
<th rowspan="2">3</th>
<th rowspan="2">4</th>
<th rowspan="2">5</th>
<th rowspan="2">6</th>