html - How to insert a svg into a hml table which spans over multiple rows -

-

i want insert svg-image in html-table should span on multiple rows of table. how do that?

here's have now:

enter image description here

but want produce this:

enter image description here

my svg-rects should span per 1 table-column on multiple rows:

here code:

<!doctype html> <html> <head> <style>  body {      position: absolute; }  svg {     stroke:rgb(0,0,0);     stroke-width:2;     border:1px solid black;     position:abolsute;     z-index:10; }  svg > rect.firstrect {     fill: rgb(234,145,234);     stroke:#006600; }  svg > rect.secondrect {     fill: rgb(123,11,234);     stroke:#006600; }  svg > rect.thirdrect {     fill: rgb(11,234,98);     stroke:#006600; }  table {     border:1px solid black;     border-collapse:collapse;     width:55%;     height:55%;     margin-top:10px;     z-index:20; }  td,th {     border:1px solid black;     padding:2px;     width:250px;     height:25px;     font-weight:bold;     text-align:center; }  td.withsvg{     position: relative; } </style> </head> <body>    <table>     <tr>         <th >23.04</th>         <th>24.04</th>         <th>profilnr</th>         <th>schnitt</th>     </tr>     <tr>         <td>03:37</td>         <td>11:35</td>         <td>19:13</td>         <td>21:46</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 class='withsvg'>         <!--    <svg width="250px" height="250px">                 <rect class='firstrect' x="0" y="100" height="150" width="100%"/>                 <rect class='secondrect' x="25" y="150" height="100" width="80%"/>                 <rect class='thirdrect' x="50" y="200" height="50" width="60%"/>             </svg> -->         </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>   </table>   </body> </html>

you have use <div> able interact row size.

sadly makes code more complicated have use kind of syntax :

<td class='withsvg'>       <div class="content">         <svg>             <rect class='firstrect' x="0" y="0" height="50" width="100%"/>             <rect class='secondrect' x="35" y="3" height="150" width="50%"/>             <rect class='thirdrect' x="43" y="6" height="120" width="40%"/>         </svg>       </div>     </td>

the code same yours, added <div> around <rect>.

here example : js fiddle


Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more