Question

我打算在HTML表格中添加一些行来标记分组行。见下图。可以在表格中绘制那些蓝线吗？感谢。

http://jsbin.com/kogijixici/1/edit?html,output

 <input type="text" autofocus/>
<ul id="room">
</ul>
<input type="button" id="btn" value="SET" />

Answer 1

是这个输出ru期待

检查Jsbin.com

中的输出

    .border{
border-top:2px solid blue;
border-left:2px solid blue;
border-bottom:2px solid blue;
height:50px;
width:20px;
position:relative;
left:100px;
bottom:10px
}

按上述方式更新你的css

Answer 2

使用以下css，您将得到结果：

foreach (....) {
   ..........
   ..........
   ..........
   my @tmp = ($x1,$x2,$y1,$y2);
   push(@target_array,\@tmp);  # Don't know how to translate this line to PHP, failed after several try with array_push
}

以下是jsbin的链接：http://jsbin.com/juzasemeje/edit?html,css,output 您可以稍微自定义值以符合您的要求。

Answer 3

试试这个

.td-line {
  position: relative;
}

.td-line:before {
  content: '';
  display: block;
  width: 20px;
  height: 73%;
  position: absolute;
  right: 10px;
  top: 13%;
  border-top: solid 1px blue;
  border-bottom: solid 1px blue;
  border-left: solid 1px blue;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table  border="1">
  <tr>
    <th width="150" scope="col">&nbsp;</th>
    <th width="100" scope="col">&nbsp;</th>
    <th width="100" scope="col">&nbsp;</th>
    <th width="100" scope="col">&nbsp;</th>
    <th width="100" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td rowspan="3" class="td-line">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="4" class="td-line">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

我如何在网页中画线？

3 个答案: