遇到在表格上画连接线的问题，需求助。_html/css

遇到在表格上画连接线的问题，需求助。_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:24:02

原创

2387人浏览过

canvas

想做一个类似这样的走势图，在表格中有数字的两个格子之间画一条线（斜线）用于连接。

网址：http://www.55128.cn/zs/1_4.htm

看了一下，貌似用到的是html5 canvas标签，但是我不明白的就是如何将此标签运用于标签上。

如果各位大神有相关示例，希望指教。谢谢。

回复讨论(解决方案)

效果如图。

用svg , IE vml

用svg , IE vml

svg 看到了，但是怎么使用在html 的

标签之上？

有示例么？

用svg , IE vml

svg 看到了，但是怎么使用在html 的

标签之上？

有示例么？
svg 绝对定位 position: absolute;

 <svg width="800px" height="800px"  style="position: absolute; top:0;left:0"   > <line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2"/> <line x1="50" y1="150" x2="100" y2="100" style="stroke:blue;stroke-width:2"/></svg> 	<table> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 	</table>

登录后复制

用svg , IE vml

svg 看到了，但是怎么使用在html 的

标签之上？

有示例么？
svg 绝对定位 position: absolute;

 <svg width="800px" height="800px"  style="position: absolute; top:0;left:0"   > <line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2"/> <line x1="50" y1="150" x2="100" y2="100" style="stroke:blue;stroke-width:2"/></svg> 	<table> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 	</table>

登录后复制

这个只能用绝对定位么？如果说每个格子中有数字的td取出来相连线，那么这种绝对定位坐标方式就用着不方便了。

这个只能用绝对定位么？如果说每个格子中有数字的td取出来相连线，那么这种绝对定位坐标方式就用着不方便了。
1。取要连TD给的坐标,通过 offsetTop,offsetLeft取坐标，也不是很麻烦
2。数据表格也是用svg 来画

这个只能用绝对定位么？如果说每个格子中有数字的td取出来相连线，那么这种绝对定位坐标方式就用着不方便了。
1。取要连TD给的坐标,通过 offsetTop,offsetLeft取坐标，也不是很麻烦
2。数据表格也是用svg 来画

谢谢了，琢磨了半天也没琢磨出来，在HTML中测试都行，一旦放入JSP页面中，就无法显示了。唉。。

大家都在看：

HTML在线转换入口网页转换器网页版在线平台 html代码怎么预览_html代码编写后如何在浏览器中预览效果如何对齐html源码_HTML源码（缩进/格式化）对齐整理方法如何处理HTML路径路径错误的解决办法如何处理HTML内容可编辑属性的解决办法