我正在尝试在两个单元格之间拉一条线。
我有带单元格的表格，我想将线从一个单元格延伸到另一个单元格。
这是我的:
这就是我想要的:
我尝试使用 <canvas>根据 HTML canvas lineTo() Method 标记但它没有用。
我尝试在表格标签前后添加它，但没有成功。
也许有人知道怎么做。
我添加了 jsfiddle 示例:JSFIDDLE example
CSS:
td {
width: 100px;
height: 90px;
text-align: left;
vertical-align: top;
border: 1px solid black;
position: relative;
}
table
{
position: fixed;
left:9px;
top:8px;
}
tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even)
{
background:#00A2E8;
}
.soldiers
{
width:20px;
height:20px;
position: absolute;
}
td span {
position: absolute;
bottom: 0;
}
HTML:
<body>
<div id="board" value="5">
<table oncontextmenu="return false">
<tbody>
<tr>
<td class="" cellnumber="21" row="4" col="0"><span>21</span></td>
<td class="" cellnumber="22" row="4" col="1"><span>22</span>
<br><br><p class="SnakesAndLadders" from="22" to="6">Snake to 6 </p></td>
<td class="" cellnumber="23" row="4" col="2"><span>23</span></td>
<td class="" cellnumber="24" row="4" col="3"><span>24</span></td>
<td class="" cellnumber="25" row="4" col="4"><span>25</span></td>
</tr>
<tr>
<td class="" cellnumber="16" row="3" col="0"><span>16</span></td>
<td class="" cellnumber="17" row="3" col="1"><span>17</span></td>
<td class="" cellnumber="18" row="3" col="2"><span>18</span></td>
<td class="" cellnumber="19" row="3" col="3"><span>19</span></td>
<td class="" cellnumber="20" row="3" col="4"><span>20</span></td></tr>
<tr>
<td class="" cellnumber="11" row="2" col="0"><span>11</span></td>
<td class="" cellnumber="12" row="2" col="1"><span>12</span></td>
<td class="" cellnumber="13" row="2" col="2"><span>13</span></td>
<td class="" cellnumber="14" row="2" col="3"><span>14</span></td>
<td class="" cellnumber="15" row="2" col="4"><span>15</span>
<br><br><p class="SnakesAndLadders" from="15" to="24">Ladder to 24 </p>
</td>
</tr>
<tr>
<td class="" cellnumber="6" row="1" col="0"><span>6</span></td>
<td class="" cellnumber="7" row="1" col="1"><span>7</span></td>
<td class="" cellnumber="8" row="1" col="2"><span>8</span></td>
<td class="" cellnumber="9" row="1" col="3"><span>9</span></td>
<td class="" cellnumber="10" row="1" col="4"><span>10</span></td>
</tr>
<tr>
<td class="" cellnumber="1" row="0" col="0"><span>1</span></td>
<td class="" cellnumber="2" row="0" col="1"><span>2</span></td>
<td class="" cellnumber="3" row="0" col="2"><span>3</span></td>
<td class="" cellnumber="4" row="0" col="3"><span>4</span></td>
<td class="" cellnumber="5" row="0" col="4"><span>5</span></td>
</tr>
最佳答案
您可以创建一个简单的 div 元素，带有黑色边框，并使用 css transform 旋转它。然后，使用 top 和 left 属性将它绝对定位在您想要的位置:
.line {
position: absolute;
height: 200px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
border: 2px solid black;
top: 50px;
left: 300px;
}
关于javascript - 如何在两个单元格之间拉伸(stretch)线(<td> 标签)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26104139/