I have multiple tables with data in them, each sized using percentage and resizable. I want to add SVG images to each table without affecting the table size. When I tried setting the sizing like this:
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="23.8345mm" height="100%" version="1.1"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality;
fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 100% 100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect class="fil0 str0" x="5%" y="5%" width="100%" height="100%"/>
<rect class="fil0 str0" x="5%" y="5%" width="100%" height="100%"/>
</g>
</svg>
Although it made the SVG smaller, it was not resizable along with the table. I need the SVG to change size when the user resizes the table.
Here is the fiddle link for reference: https://jsfiddle.net/vaxobasilidze/1oe8w8wm/12/
The SVG should remain a fixed size while allowing the table to resize. The desired outcome can be seen in the second table of the fiddle. How can I correctly set the percentage?
EDIT: Here is another fiddle demonstrating the issue: https://jsfiddle.net/vaxobasilidze/qu20vxcx/3/. What am I doing wrong?
.channels {
/*border-collapse: collapse;*/
border-spacing: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-weight: bold;
border: 1px solid rgba(30, 30, 30, 1);
border-radius: 4px;
overflow: hidden;
background: url(images/comment-bg3.png) repeat;
resize: both;
}
.channels td {
border-left: 1px solid rgba(30, 30, 30, 1);
}
... (CSS code continues, too lengthy to display here)
</table>