I have a problem drawing connecting lines on a table and need help. _html/css

canvas

If you want to make a trend chart like this, draw a line (slash) between the two grids with numbers in the table for connection.

Website: http://www.55128.cn/zs/1_4.htm

After taking a look, it seems that the html5 canvas tag is used, but I don’t understand it. That's how to apply this tag to the tag.

If you have relevant examples, I hope you can give them some advice. Thanks.

Reply to the discussion (solution)

The effect is as shown in the picture.

Use svg, IE vml

Use svg, IE vml

I saw svg, but how to use it on the

tag of html?

Are there any examples?

Use svg, IE vml

I saw svg, but how to use it on the

tag of html?

Are there any examples?
svg absolute positioning 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>

Copy after login

Use svg, IE vml

I saw svg, but how to use it in html< Above the ;table> tag?

Are there any examples?
svg absolute positioning 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>

Copy after login

Can this only use absolute positioning? If the td with numbers in each grid is taken out and connected, then this absolute positioning coordinate method is inconvenient.

Can this only use absolute positioning? If the td with numbers in each grid is taken out to connect the lines, then this absolute positioning coordinate method will be inconvenient.
1. It is not very troublesome to get the coordinates given by TD through offsetTop and offsetLeft
2. The data table is also drawn with svg

Thank you, I have been thinking about it for a long time and I still can’t figure it out. It can be tested in HTML, but once it is put into the JSP page, it cannot be displayed. well. .

Related labels：

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

source：php.cn

Previous article：How to remove CSS styles from the page and display them after they are stored in the database_html/css_WEB-ITnose Next article：About DIV layout_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

I have a problem drawing connecting lines on a table and need help. _html/css_WEB-ITnose

Reply to the discussion (solution)