Javascript 如何在两个单元格（<；td>；标记）之间拉伸线_Javascript_Jquery_Html_Css

Javascript 如何在两个单元格（<；td>；标记）之间拉伸线

javascript jquery html css

Javascript 如何在两个单元格（<；td>；标记）之间拉伸线,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正试图在两个单元格之间拉伸一条线。我有一张有单元格的桌子，我想把线从一个单元格延伸到另一个单元格这就是我所拥有的：这就是我想要的：我试图根据使用标记，但没有成功。我尝试在表的标记前后添加它，但没有成功。也许有人知道怎么做。我添加了JSFIDLE示例： CSS: td { width: 100px; height: 90px; text-align: left; vertical-align: top; border: 1px solid

我正试图在两个单元格之间拉伸一条线。
我有一张有单元格的桌子，我想把线从一个单元格延伸到另一个单元格

这就是我所拥有的：

这就是我想要的：

我试图根据使用

标记，但没有成功。
我尝试在表的标记前后添加它，但没有成功。
也许有人知道怎么做。
我添加了JSFIDLE示例：

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;
}

您链接的JSFIDLE中没有JavaScript代码。你的

尝试到底是如何失败的？@Pointy，我添加了一个干净的例子。

#myCanvas {
    z-index: 10;
    position:absolute;
}

.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;
}