Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>Why doesn't <code>border-spacing</code> work?</h1> <p><code>border-spacing</code> doesn't work because, from <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing</a>,</p> <blockquote> <p>The <code>border-spacing</code> CSS property specifies the distance between the borders of adjacent cells (<strong>only for the <a href="https://developer.mozilla.org/en/CSS/border-collapse" rel="nofollow">separated borders model</a></strong>).</p> </blockquote> <p>Moreover <code>border-spacing</code> is the space between all cells, not only between border cells and the table, so it isn't what you want.</p> <h1>Solution 1: wrapper</h1> <p><div class="snippet" data-lang="js" data-hide="true" data-console="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper { border: 10px solid #d0d0ff; width: 70%; overflow: auto; } .outlined { font: 13px Tahoma; border-collapse: collapse; margin: 20px; } .center { text-align: center; } .side { text-align: left; } .lastLine { border-bottom: 2px solid black; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt; &lt;table class="outlined"&gt; &lt;tr id="headline"&gt; &lt;th class="side"&gt;Item&lt;/th&gt; &lt;th class="side"&gt;Manufacturer&lt;/th&gt; &lt;th class="side"&gt;Size&lt;/th&gt; &lt;th class="center"&gt;Unit Price&lt;/th&gt; &lt;th class="center"&gt;Quantity&lt;/th&gt; &lt;th class="center"&gt;Total Price&lt;/th&gt; &lt;/tr&gt; &lt;tr class="firstCol"&gt; &lt;td class="side"&gt;Corn Flakes&lt;/td&gt; &lt;td class="side"&gt;Kellogg's&lt;/td&gt; &lt;td class="side"&gt;18 0z&lt;/td&gt; &lt;td class="center"&gt;2.5&lt;/td&gt; &lt;td class="center"&gt;1&lt;/td&gt; &lt;td class="center"&gt;2.5&lt;/td&gt; &lt;/tr&gt; &lt;tr class="secondCol"&gt; &lt;td class="side"&gt;Solid White Tuna&lt;/td&gt; &lt;td class="side"&gt;Starkist&lt;/td&gt; &lt;td class="side"&gt;5 oz&lt;/td&gt; &lt;td class="center"&gt;2.79&lt;/td&gt; &lt;td class="center"&gt;2&lt;/td&gt; &lt;td class="center"&gt;5.58&lt;/td&gt; &lt;/tr&gt; &lt;tr class="firstCol"&gt; &lt;td class="side"&gt;Cream of Mushroom Soup&lt;/td&gt; &lt;td class="side"&gt;Campbell's&lt;/td&gt; &lt;td class="side"&gt;10.75 oz&lt;/td&gt; &lt;td class="center"&gt;1.00&lt;/td&gt; &lt;td class="center"&gt;2&lt;/td&gt; &lt;td class="center"&gt;2.00&lt;/td&gt; &lt;/tr&gt; &lt;tr class="secondCol"&gt; &lt;td class="side"&gt;2% Lowfat Milk&lt;/td&gt; &lt;td class="side"&gt;Safeway&lt;/td&gt; &lt;td class="side"&gt;0.5 gal&lt;/td&gt; &lt;td class="center"&gt;1.99&lt;/td&gt; &lt;td class="center"&gt;1&lt;/td&gt; &lt;td class="center"&gt;1.99&lt;/td&gt; &lt;/tr&gt; &lt;tr class="lastLine"&gt; &lt;td class="side"&gt;Extra-Wide Egg Noodles&lt;/td&gt; &lt;td class="side"&gt;Golden Grain&lt;/td&gt; &lt;td class="side"&gt;12 oz&lt;/td&gt; &lt;td class="center"&gt;0.87&lt;/td&gt; &lt;td class="center"&gt;3&lt;/td&gt; &lt;td class="center"&gt;2.61&lt;/td&gt; &lt;/tr&gt; &lt;tr class="bottom"&gt; &lt;td&gt;Total&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td class="center"&gt;9&lt;/td&gt; &lt;td class="center"&gt;14.68&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>It's the old way of doing it: set a a margin to the table and place it inside a wrapper element with a border.</p> <p>Modifying the layout for styling purposes can be syntactically incorrect, but works on old browsers.</p> <h1>Solution 2: outline</h1> <p><div class="snippet" data-lang="js" data-hide="true" data-console="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.outlined { font: 13px Tahoma; width: 70%; border-collapse: collapse; border: 20px solid transparent; margin: 20px; outline: 10px solid #d0d0ff; } .center { text-align: center; } .side { text-align: left; } .lastLine { border-bottom: 2px solid black; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="outlined"&gt; &lt;tr id="headline"&gt; &lt;th class="side"&gt;Item&lt;/th&gt; &lt;th class="side"&gt;Manufacturer&lt;/th&gt; &lt;th class="side"&gt;Size&lt;/th&gt; &lt;th class="center"&gt;Unit Price&lt;/th&gt; &lt;th class="center"&gt;Quantity&lt;/th&gt; &lt;th class="center"&gt;Total Price&lt;/th&gt; &lt;/tr&gt; &lt;tr class="firstCol"&gt; &lt;td class="side"&gt;Corn Flakes&lt;/td&gt; &lt;td class="side"&gt;Kellogg's&lt;/td&gt; &lt;td class="side"&gt;18 0z&lt;/td&gt; &lt;td class="center"&gt;2.5&lt;/td&gt; &lt;td class="center"&gt;1&lt;/td&gt; &lt;td class="center"&gt;2.5&lt;/td&gt; &lt;/tr&gt; &lt;tr class="secondCol"&gt; &lt;td class="side"&gt;Solid White Tuna&lt;/td&gt; &lt;td class="side"&gt;Starkist&lt;/td&gt; &lt;td class="side"&gt;5 oz&lt;/td&gt; &lt;td class="center"&gt;2.79&lt;/td&gt; &lt;td class="center"&gt;2&lt;/td&gt; &lt;td class="center"&gt;5.58&lt;/td&gt; &lt;/tr&gt; &lt;tr class="firstCol"&gt; &lt;td class="side"&gt;Cream of Mushroom Soup&lt;/td&gt; &lt;td class="side"&gt;Campbell's&lt;/td&gt; &lt;td class="side"&gt;10.75 oz&lt;/td&gt; &lt;td class="center"&gt;1.00&lt;/td&gt; &lt;td class="center"&gt;2&lt;/td&gt; &lt;td class="center"&gt;2.00&lt;/td&gt; &lt;/tr&gt; &lt;tr class="secondCol"&gt; &lt;td class="side"&gt;2% Lowfat Milk&lt;/td&gt; &lt;td class="side"&gt;Safeway&lt;/td&gt; &lt;td class="side"&gt;0.5 gal&lt;/td&gt; &lt;td class="center"&gt;1.99&lt;/td&gt; &lt;td class="center"&gt;1&lt;/td&gt; &lt;td class="center"&gt;1.99&lt;/td&gt; &lt;/tr&gt; &lt;tr class="lastLine"&gt; &lt;td class="side"&gt;Extra-Wide Egg Noodles&lt;/td&gt; &lt;td class="side"&gt;Golden Grain&lt;/td&gt; &lt;td class="side"&gt;12 oz&lt;/td&gt; &lt;td class="center"&gt;0.87&lt;/td&gt; &lt;td class="center"&gt;3&lt;/td&gt; &lt;td class="center"&gt;2.61&lt;/td&gt; &lt;/tr&gt; &lt;tr class="bottom"&gt; &lt;td&gt;Total&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td class="center"&gt;9&lt;/td&gt; &lt;td class="center"&gt;14.68&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</code></pre> </div> </div> </p> <p>Add a transparent border and an <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline" rel="nofollow">outline</a> to the table:</p> <pre class="lang-css prettyprint-override"><code>border: 20px solid transparent; outline: 10px solid #d0d0ff; margin: /* &gt;= 10px */; </code></pre> <p>Note the outline doesn't increase table's width, so it will overlap surrounding elements. Then, it can be a good idea to use, at least, a margin of 10px.</p> <p><strong>Browser support</strong></p> <pre class="lang-none prettyprint-override"><code>Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) 1.0 | 1.5 (1.8) | 8.0 | 7.0 | 1.2 (125) </code></pre> <p><strong>Note</strong>: Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape</p> <h1>Solution 3: box-shadow</h1> <p><div class="snippet" data-lang="js" data-hide="true" data-console="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.outlined { font: 13px Tahoma; width: 70%; border-collapse: collapse; border: 20px solid transparent; margin: 20px; box-shadow: 0 0 0 10px #d0d0ff; } .center { text-align: center; } .side { text-align: left; } .lastLine { border-bottom: 2px solid black; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="outlined"&gt; &lt;tr id="headline"&gt; &lt;th class="side"&gt;Item&lt;/th&gt; &lt;th class="side"&gt;Manufacturer&lt;/th&gt; &lt;th class="side"&gt;Size&lt;/th&gt; &lt;th class="center"&gt;Unit Price&lt;/th&gt; &lt;th class="center"&gt;Quantity&lt;/th&gt; &lt;th class="center"&gt;Total Price&lt;/th&gt; &lt;/tr&gt; &lt;tr class="firstCol"&gt; &lt;td class="side"&gt;Corn Flakes&lt;/td&gt; &lt;td class="side"&gt;Kellogg's&lt;/td&gt; &lt;td class="side"&gt;18 0z&lt;/td&gt; &lt;td class="center"&gt;2.5&lt;/td&gt; &lt;td class="center"&gt;1&lt;/td&gt; &lt;td class="center"&gt;2.5&lt;/td&gt; &lt;/tr&gt; &lt;tr class="secondCol"&gt; &lt;td class="side"&gt;Solid White Tuna&lt;/td&gt; &lt;td class="side"&gt;Starkist&lt;/td&gt; &lt;td class="side"&gt;5 oz&lt;/td&gt; &lt;td class="center"&gt;2.79&lt;/td&gt; &lt;td class="center"&gt;2&lt;/td&gt; &lt;td class="center"&gt;5.58&lt;/td&gt; &lt;/tr&gt; &lt;tr class="firstCol"&gt; &lt;td class="side"&gt;Cream of Mushroom Soup&lt;/td&gt; &lt;td class="side"&gt;Campbell's&lt;/td&gt; &lt;td class="side"&gt;10.75 oz&lt;/td&gt; &lt;td class="center"&gt;1.00&lt;/td&gt; &lt;td class="center"&gt;2&lt;/td&gt; &lt;td class="center"&gt;2.00&lt;/td&gt; &lt;/tr&gt; &lt;tr class="secondCol"&gt; &lt;td class="side"&gt;2% Lowfat Milk&lt;/td&gt; &lt;td class="side"&gt;Safeway&lt;/td&gt; &lt;td class="side"&gt;0.5 gal&lt;/td&gt; &lt;td class="center"&gt;1.99&lt;/td&gt; &lt;td class="center"&gt;1&lt;/td&gt; &lt;td class="center"&gt;1.99&lt;/td&gt; &lt;/tr&gt; &lt;tr class="lastLine"&gt; &lt;td class="side"&gt;Extra-Wide Egg Noodles&lt;/td&gt; &lt;td class="side"&gt;Golden Grain&lt;/td&gt; &lt;td class="side"&gt;12 oz&lt;/td&gt; &lt;td class="center"&gt;0.87&lt;/td&gt; &lt;td class="center"&gt;3&lt;/td&gt; &lt;td class="center"&gt;2.61&lt;/td&gt; &lt;/tr&gt; &lt;tr class="bottom"&gt; &lt;td&gt;Total&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td class="center"&gt;9&lt;/td&gt; &lt;td class="center"&gt;14.68&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</code></pre> </div> </div> </p> <p>You can also use a transparent border with a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" rel="nofollow"><code>box-shadow</code></a>:</p> <pre class="lang-css prettyprint-override"><code>border: 20px solid transparent; box-shadow: 0 0 0 10px #d0d0ff; margin: /* &gt;= 10px */; </code></pre> <p>Note the shadow doesn't increase table's width, so it will overlap surrounding elements. Then, it can be a good idea to use, at least, a margin of 10px.</p> <p><strong>Browser support</strong></p> <p>Use vendor prefixes (<code>-webkit-box-shadow</code> and <code>-moz-box-shadow</code>) for more support:</p> <pre class="lang-none prettyprint-override"><code>Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) ----------------------------------------------------------------------------------- 10.0 | 4.0 (2.0) | 9.0 | 10.5 | 5.1 (Webkit 534) 4.0 -webkit| 3.5 (1.9.1) -moz| | | 5.0 (Webkit 533) -webkit </code></pre> <p><strong>Notes</strong> (thanks @davidbuttar):</p> <ul> <li>In order to get box-shadow in IE9 or later, you need to set <code>border-collapse</code> to <code>separate</code>. Then, you lose the bar in your table.</li> <li>On Chrome, transparent borders don't stop the the bar in your table, and it reaches the box-shadow. I think it's a bug, and can be fixed using a white borders instead of transparent.</li> </ul> <hr> <h1>Appendix: How does box-shadow solution work?</h1> <p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow</a></p> <blockquote> <p>Formal syntax: none | [inset? &amp;&amp; [ &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;spread-radius&gt;? &lt;color&gt;? ] ]#</p> </blockquote> <ul> <li><strong>inset</strong>: omitted, don't want it.</li> <li><strong>&lt;offset-x&gt; &lt;offset-y&gt;</strong>: <code>0 0</code>, because we don't want to move the shadow.</li> <li><strong>&lt;blur-radius&gt;</strong>: <code>0</code>, because we don't want a blurred shadow.</li> <li><strong>&lt;spread-radius&gt;</strong>: <code>10px</code>, because we want the shadow to expand to be 10px wide.</li> <li><strong>&lt;color&gt;</strong>: <code>#d0d0ff</code></li> </ul> <blockquote> <p>How could it be that you made the border transparent and the shadow colored, and you got the opposite result?</p> </blockquote> <p>That's because <code>border-spacing</code> defines a shadow <strong>outside</strong> borders (unless you use <code>inset</code>)</p> <p>From the <a href="http://dev.w3.org/csswg/css-backgrounds/#box-shadow" rel="nofollow">spec</a>:</p> <blockquote> <p>An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only.</p> </blockquote>
    singulars
    1. This table or related slice is empty.
    1. POborder spacing property doesn't work
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USOriol
    1. USOriol
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COit seems perfect.. my only problem is that I am not allowed to do any design in html only in css.. can I move the border-spacing="1" somehow to the css ?
      singulars
      1. PO
      1. USOhad
    2. COThe border-spacing is not a table attribute, but rather it is a CSS property and could be included in the CSS style sheet. See: http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing
      singulars
      1. PO
      1. USMarc Audet
    3. CODoesn't work on Google chrome or IE 10.
      singulars
      1. PO
      1. USdavidbuttar
 

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