Question

我有一张桌子，在其中一列中我有一些图形。我需要的是从td元素中所有内容的左上方20px的垂直线。

我试过这样的事情，结果并不好。

<td>
    <div>
        <!-- my vertical line -->
        <div style="width:20px; height:30px; z-index:1011; border-right: thin solid red;">
        </div>

        <!-- other content under the vertical line in td -->
        <!-- here width can be more than 20px -->
        <div style="width:5px; height:10px; z-index:1001; background-color:gray;"> </div>
    </div>
</td>

我也尝试过位置：亲戚;对于“主要div”而言对于其他2而言是绝对的，但不是一个好结果。

有了这个就完美了，我只需要在左边20 xx的顶部添加一条垂直线

<td>
    <div>
       <div style="width:5px; height:10px; z-index:1011; background-color:gray;"> </div>
    </div>
</td>

 red line
--------|----------td-----

        |

--------|-- some line (one div in may case)

        |            

--------|---------</td>---

--------|---------<td>----

        |

---     |  other line

        |

------------------</td>---

小提琴wrong result ("not good")

这是预期的

Answer 1

用于创建图表的表有很多陷阱。

首先，表格的cellspacing和单元格垂直填充必须设置为零，以使红线从上到下一直到位。其次，高度应该设置为某个值，因此一行中最后一个单元格的内部div可以设置为100％高度，以使红线在单元格中从上到下（它还需要由于可能的重叠，绝对是位置。第三，要使水平线出现在单元格的中间，所有单元格应该具有固定的行高，水平线应该显示为带有vertical-align：middle的内联块。

＆＃13;

table tr td {
  height: 30px;
  padding: 0 10px;
  line-height: 30px;
}
.horizontal-line{
    height:10px; 
    z-index:1001; 
    background-color:gray;
    line-height: 20px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    
}
.vertical-line{ 
  width:0px;
  z-index:10011; 
  border-right: thin solid red;
  position: absolute;
  height: 100%;
  left: 20px;
}

.width-5{
    width:5px;
}
.width-30{
    width:30px;
}
td, td > div {
  height: 100%;
  position: relative;
  line-height: 30px;
}

＆＃13;

<table cellspacing="0">
  <tr>
		<td>1</td>
		<td>11</td>
		<td>
			<div>				
        <div class="vertical-line" ></div>
        <div class="horizontal-line width-5"></div>				
			</div>
		</td>
	</tr>
	<tr>
		<td>2</td>
		<td>22</td>
		<td>
			<div>				
        <div class="vertical-line" ></div>
        <div class="horizontal-line width-30"></div>				
			</div>
		</td>
	</tr>
</table>

＆＃13;

注意：我还添加并修改了一些其他的小东西，比如border-radius，以反映你的截图。如果你想玩，这里是fiddle。

Answer 2

我只是对您的样式表及其工作做了一些小改动。

.horizontal-line{
    height:10px; 
    z-index:1001; 
    background-color:gray;
    margin-left: 5px;//addes this
}
.vertical-line{ 
  height:30px; 
  width:20px;
  z-index:10011; 
  border-right: thin solid red;
  position: absolute;//and this
}

.width-5{
    width:5px;
}
.width-30{
    width:30px;
}

如果您对此答案感到满意，请与我们联系。：）

Answer 3

试试这个： -

Mat output = img > 128;

或

<div style="width:5px; height:10px; z-index:1001; background-color:gray;padding-left: 20px"> </div>

希望这会有所帮助。

使用div在td内的垂直线

3 个答案: