Databases
StackOverflow2013
Postsdbo
POHow to remove the space between the <svg> and the <td> in HTML5?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to remove the space between the <svg> and the <td> in HTML5?
    primarykey
    data
    text
    <p>I use the code below to have SVG embedded in HTML5. The only problem now I cannot solve is that there is much space between the <code>&lt;svg&gt;</code> and the <code>&lt;td&gt;</code> when the HTML file is viewed in a browser. Can someone tell me how to remove the space?</p> <p>Thank you in advance!</p> <p>More details:</p> <p>Sorry, I forgot to say which browser I use. I find that when I use IE9, there is much space between the SVG and the left and right bar. However, when I use Chrome, there is much space between the SVG and the top and bottom bar. It is quite strange.</p> <p>I edit the code below. I add svg {margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px;background-color:yellow;}</p> <p>in the code. What I want to do is to remove the yellow space. Now the question becomes more specific.</p> <hr> <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;SarShips: scs&lt;/title&gt; &lt;style type="text/css"&gt; table { border-collapse:collapse; } table, td, th { border:1px solid black; } table {margin-left:auto;margin-right:auto} tr.odd {background-color:#E0E0F0} tr.even {background-color:#F0F0FF} th {font:22px sans-serif;background-color:#98AFC7;color:white;padding:6px} td.e {font:bold 15px serif;text-align:right;padding:4px} td.v {font:15px monospace;text-align:left;padding:4px} td.i {padding:4px} p {text-align:center} svg {margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px;background-color:yellow;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Parameters&lt;/th&gt;&lt;th&gt;Imagette&lt;/th&gt;&lt;th&gt;Profile&lt;/th&gt;&lt;th&gt;Remarks&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; &lt;/td&gt;&lt;td class="i"&gt;&lt;/td&gt; &lt;td class="i"&gt; &lt;svg width="100%" height="100%" viewBox="0 0 400 400" &gt; &lt;g&gt; &lt;rect width="400" height="400" style="stroke-width:1; stroke:rgb(0,0,0)"&gt;&lt;/rect&gt; &lt;circle cx="200" cy="200" r="200" stroke="green" stroke-width="2"&gt;&lt;/circle&gt; &lt;circle cx="200" cy="200" r="160" stroke="green" stroke-width="2"&gt;&lt;/circle&gt; &lt;circle cx="200" cy="200" r="120" stroke="green" stroke-width="2"&gt;&lt;/circle&gt; &lt;circle cx="200" cy="200" r="80" stroke="green" stroke-width="2"&gt;&lt;/circle&gt; &lt;circle cx="200" cy="200" r="40" stroke="green" stroke-width="2"&gt;&lt;/circle&gt; &lt;path d="M250 150 L150 350 L350 350 Z" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"&gt;&lt;/path&gt; &lt;path d="M200,200 L200,0 A200 200 0 0 1 200 400 Z" style="fill:green;stroke:green;stroke-width:5; fill-opacity:0.5;stroke-opacity:0.9"&gt;&lt;/path&gt; &lt;path d="M150 250 S150 150 170 170 L220 150Z" style="fill:pink;stroke:blue;stroke-width:1; fill-opacity:0.9;stroke-opacity:0.9"&gt;&lt;/path&gt; &lt;/g&gt; &lt;/svg&gt; &lt;/td&gt;&lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser811416
    1. USuser811416
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to remove the space between the <svg> and the <td> in HTML5?
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POHow to remove the space between the <svg> and the <td> in HTML5?
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POHow to remove the space between the <svg> and the <td> in HTML5?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHow much space? 4px, like the padding you have set on `td.i`?
      singulars
      1. POHow to remove the space between the <svg> and the <td> in HTML5?
      1. USDouglas F Shearer
    2. COSpecifying which browser you use wouldn't hurt. I guess that it is Firefox, from what I can tell no other browser supports mixing HTML and SVG like that yet.
      singulars
      1. POHow to remove the space between the <svg> and the <td> in HTML5?
      1. USWladimir Palant
    3. COjsFiddle to play with at http://jsfiddle.net/BJgRT/
      singulars
      1. POHow to remove the space between the <svg> and the <td> in HTML5?
      1. USPaul Alexander
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload