CODEWITHSUNDEEP
htmlcss
Ohad
Ohad

Reputation: 1631

border spacing property doesn't work as expected

I am trying to make the following table: table

I have an outer border and one border at the bottom. I got it all right, my only problem is that I can't get the space between the outer border and table (space of 20 px) when I use border-spacing it doesn't work.

I would appreciate your help.

here is a sample of the code: http://jsbin.com/AcanusA/1/edit

css code:

.outlined
{
  font:13px Tahoma;
  width: 70%;
  border-collapse: collapse;
  border: 10px solid #d0d0ff;
  margin: 20px;
  border-spacing:20px;
}

.center{
  text-align: center;
}

.side{
  text-align: left;
}

.lastLine{
   border-bottom: 2px solid black;
}

html code:

<!DOCTYPE html>
<html>
  <title>web programming project 2</title>
  <link rel="stylesheet" type="text/css" href="exe2CSS2.css">
  <body>

    <table class="outlined">
      <tr id="headline">
        <th class="side">Item</th>
        <th class="side">Manufacturer</th>
        <th class="side">Size</th>
        <th class="center">Unit Price</th>
        <th class="center">Quantity</th>
        <th class="center">Total Price</th>
      </tr>

      <tr class="firstCol">
        <td class="side">Corn Flakes</td>
        <td class="side">Kellogg's</td>
        <td class="side">18 0z</td>
        <td class="center">2.5</td>
        <td class="center">1</td>
        <td class="center">2.5</td>
      </tr>

      <tr class="secondCol">
        <td class="side">Solid White Tuna</td>
        <td class="side">Starkist</td>
        <td class="side">5 oz</td>
        <td class="center">2.79</td>
        <td class="center">2</td>
        <td class="center">5.58</td>
      </tr>

      <tr class="firstCol">
        <td class="side">Cream of Mushroom Soup</td>
        <td class="side">Campbell's</td>
        <td class="side">10.75 oz</td>
        <td class="center">1.00</td>
        <td class="center">2</td>
        <td class="center">2.00</td>
      </tr>

      <tr class="secondCol">
        <td class="side">2% Lowfat Milk</td>
        <td class="side">Safeway</td>
        <td class="side">0.5 gal</td>
        <td class="center">1.99</td>
        <td class="center">1</td>
        <td class="center">1.99</td>
      </tr>

      <tr class="lastLine">
        <td class="side">Extra-Wide Egg Noodles</td>
        <td class="side">Golden Grain</td>
        <td class="side">12 oz</td>
        <td class="center">0.87</td>
        <td class="center">3</td>
        <td class="center">2.61</td>
      </tr>

      <tr class="bottom">
        <td>Total</td>
        <td></td>
        <td></td>
        <td></td>
        <td class="center">9</td>
        <td class="center">14.68</td>
      </tr>
    </table>

  </body>
</html>

Upvotes: 0

Views: 5795

Answers (2)

Oriol
Oriol

Reputation: 288170

Why doesn't border-spacing work?

border-spacing doesn't work because, from https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing,

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model).

Moreover border-spacing is the space between all cells, not only between border cells and the table, so it isn't what you want.

Solution 1: wrapper

#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;
}
<div id="wrapper">
  <table class="outlined">
    <tr id="headline">
      <th class="side">Item</th>
      <th class="side">Manufacturer</th>
      <th class="side">Size</th>
      <th class="center">Unit Price</th>
      <th class="center">Quantity</th>
      <th class="center">Total Price</th>
    </tr>
    <tr class="firstCol">
      <td class="side">Corn Flakes</td>
      <td class="side">Kellogg's</td>
      <td class="side">18 0z</td>
      <td class="center">2.5</td>
      <td class="center">1</td>
      <td class="center">2.5</td>
    </tr>
    <tr class="secondCol">
      <td class="side">Solid White Tuna</td>
      <td class="side">Starkist</td>
      <td class="side">5 oz</td>
      <td class="center">2.79</td>
      <td class="center">2</td>
      <td class="center">5.58</td>
    </tr>
    <tr class="firstCol">
      <td class="side">Cream of Mushroom Soup</td>
      <td class="side">Campbell's</td>
      <td class="side">10.75 oz</td>
      <td class="center">1.00</td>
      <td class="center">2</td>
      <td class="center">2.00</td>
    </tr>
    <tr class="secondCol">
      <td class="side">2% Lowfat Milk</td>
      <td class="side">Safeway</td>
      <td class="side">0.5 gal</td>
      <td class="center">1.99</td>
      <td class="center">1</td>
      <td class="center">1.99</td>
    </tr>
    <tr class="lastLine">
      <td class="side">Extra-Wide Egg Noodles</td>
      <td class="side">Golden Grain</td>
      <td class="side">12 oz</td>
      <td class="center">0.87</td>
      <td class="center">3</td>
      <td class="center">2.61</td>
    </tr>
    <tr class="bottom">
      <td>Total</td>
      <td></td>
      <td></td>
      <td></td>
      <td class="center">9</td>
      <td class="center">14.68</td>
    </tr>
  </table>
</div>

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.

Modifying the layout for styling purposes can be syntactically incorrect, but works on old browsers.

Solution 2: outline

.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;
}
<table class="outlined">
  <tr id="headline">
    <th class="side">Item</th>
    <th class="side">Manufacturer</th>
    <th class="side">Size</th>
    <th class="center">Unit Price</th>
    <th class="center">Quantity</th>
    <th class="center">Total Price</th>
  </tr>
  <tr class="firstCol">
    <td class="side">Corn Flakes</td>
    <td class="side">Kellogg's</td>
    <td class="side">18 0z</td>
    <td class="center">2.5</td>
    <td class="center">1</td>
    <td class="center">2.5</td>
  </tr>
  <tr class="secondCol">
    <td class="side">Solid White Tuna</td>
    <td class="side">Starkist</td>
    <td class="side">5 oz</td>
    <td class="center">2.79</td>
    <td class="center">2</td>
    <td class="center">5.58</td>
  </tr>
  <tr class="firstCol">
    <td class="side">Cream of Mushroom Soup</td>
    <td class="side">Campbell's</td>
    <td class="side">10.75 oz</td>
    <td class="center">1.00</td>
    <td class="center">2</td>
    <td class="center">2.00</td>
  </tr>
  <tr class="secondCol">
    <td class="side">2% Lowfat Milk</td>
    <td class="side">Safeway</td>
    <td class="side">0.5 gal</td>
    <td class="center">1.99</td>
    <td class="center">1</td>
    <td class="center">1.99</td>
  </tr>
  <tr class="lastLine">
    <td class="side">Extra-Wide Egg Noodles</td>
    <td class="side">Golden Grain</td>
    <td class="side">12 oz</td>
    <td class="center">0.87</td>
    <td class="center">3</td>
    <td class="center">2.61</td>
  </tr>
  <tr class="bottom">
    <td>Total</td>
    <td></td>
    <td></td>
    <td></td>
    <td class="center">9</td>
    <td class="center">14.68</td>
  </tr>
</table>

Add a transparent border and an outline to the table:

border: 20px solid transparent;
outline: 10px solid #d0d0ff;
margin: /* >= 10px */;

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.

Browser support

Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit)
1.0    | 1.5 (1.8)       | 8.0               | 7.0   | 1.2 (125)

Note: Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape

Solution 3: box-shadow

.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;
}
<table class="outlined">
  <tr id="headline">
    <th class="side">Item</th>
    <th class="side">Manufacturer</th>
    <th class="side">Size</th>
    <th class="center">Unit Price</th>
    <th class="center">Quantity</th>
    <th class="center">Total Price</th>
  </tr>
  <tr class="firstCol">
    <td class="side">Corn Flakes</td>
    <td class="side">Kellogg's</td>
    <td class="side">18 0z</td>
    <td class="center">2.5</td>
    <td class="center">1</td>
    <td class="center">2.5</td>
  </tr>
  <tr class="secondCol">
    <td class="side">Solid White Tuna</td>
    <td class="side">Starkist</td>
    <td class="side">5 oz</td>
    <td class="center">2.79</td>
    <td class="center">2</td>
    <td class="center">5.58</td>
  </tr>
  <tr class="firstCol">
    <td class="side">Cream of Mushroom Soup</td>
    <td class="side">Campbell's</td>
    <td class="side">10.75 oz</td>
    <td class="center">1.00</td>
    <td class="center">2</td>
    <td class="center">2.00</td>
  </tr>
  <tr class="secondCol">
    <td class="side">2% Lowfat Milk</td>
    <td class="side">Safeway</td>
    <td class="side">0.5 gal</td>
    <td class="center">1.99</td>
    <td class="center">1</td>
    <td class="center">1.99</td>
  </tr>
  <tr class="lastLine">
    <td class="side">Extra-Wide Egg Noodles</td>
    <td class="side">Golden Grain</td>
    <td class="side">12 oz</td>
    <td class="center">0.87</td>
    <td class="center">3</td>
    <td class="center">2.61</td>
  </tr>
  <tr class="bottom">
    <td>Total</td>
    <td></td>
    <td></td>
    <td></td>
    <td class="center">9</td>
    <td class="center">14.68</td>
  </tr>
</table>

You can also use a transparent border with a box-shadow:

border: 20px solid transparent;
box-shadow: 0 0 0 10px #d0d0ff;
margin: /* >= 10px */;

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.

Browser support

Use vendor prefixes (-webkit-box-shadow and -moz-box-shadow) for more support:

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

Notes (thanks @davidbuttar):

  • In order to get box-shadow in IE9 or later, you need to set border-collapse to separate. Then, you lose the bar in your table.
  • 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.

Appendix: How does box-shadow solution work?

See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

  • inset: omitted, don't want it.
  • <offset-x> <offset-y>: 0 0, because we don't want to move the shadow.
  • <blur-radius>: 0, because we don't want a blurred shadow.
  • <spread-radius>: 10px, because we want the shadow to expand to be 10px wide.
  • <color>: #d0d0ff

How could it be that you made the border transparent and the shadow colored, and you got the opposite result?

That's because border-spacing defines a shadow outside borders (unless you use inset)

From the spec:

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.

Upvotes: 3

davidbuttar
davidbuttar

Reputation: 676

I would just use a container div and put the border on that with some padding:

http://jsbin.com/AcanusA/8/edit

Html becomes:

<div class="outlined-container-1">
<div class="outlined-container-2">
<table class="outlined">
<tr id="headline">
<th class="si .......
</div>
</div>

Additional CSS:

.outlined-container-1
{
width:70%;
}

.outlined-container-2
{
border: 10px solid #d0d0ff;
padding:20px;
}


.outlined
{
  width:100%;
  font:13px Tahoma;
  border-collapse: collapse;
}

Obviously change the outlined name to something more relevant.

Upvotes: 0

Related Questions