边框间距属性不起作用

时间：2013-11-18 22:17:12

标签： html css css3

我正在尝试制作下表： table

我有一个外边框，底部有一个边框。 我把它弄好了，我唯一的问题是我无法获得外边框和桌子之间的空间（20 px的空间） 当我使用边框间距时，它不起作用。

感谢您的帮助。

这是一个代码示例： http://jsbin.com/AcanusA/1/edit

css代码：

.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代码：

<!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>
</table>

</body>
</html>

2 个答案:

答案 0 :(得分：3)

为什么border-spacing不起作用？

border-spacing不起作用，因为来自https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing，

  

border-spacing CSS属性指定了之间的距离   相邻单元格的边框（仅适用于separated borders model ）。

此外border-spacing是所有单元格之间的空间，不仅是边框单元格与表格之间的空间，因此它不是您想要的。

解决方案1：包装器

#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>

这是旧方法：为表格设置一个边距，并将其放在带边框的包装元素中。

为样式目的修改布局在语法上可能不正确，但适用于旧浏览器。

解决方案2：大纲

.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>

在表格中添加透明边框和outline：

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

请注意，轮廓不会增加表格的宽度，因此它会与周围的元素重叠。然后，至少使用10px的边距是个好主意。

浏览器支持 

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

注意：轮廓可能是非矩形的。它们在Gecko / Firefox中是矩形的。但是例如Opera绘制非矩形形状

解决方案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>

您还可以使用带box-shadow的透明边框：

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

请注意，阴影不会增加表格的宽度，因此它会与周围的元素重叠。然后，至少使用10px的边距是个好主意。

浏览器支持

使用供应商前缀（-webkit-box-shadow和-moz-box-shadow）获得更多支持：

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

备注（感谢@davidbuttar）：

  • 要在IE9或更高版本中获取box-shadow，您需要将border-collapse设置为separate。然后，你失去了你桌子上的标杆。
  • 在Chrome上，透明边框不会停止表格中的栏，而是会到达箱形阴影。我认为这是一个错误，可以使用白色边框而不是透明来修复。

附录：盒子阴影解决方案如何工作？

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

  

正式语法：无| [插图？ ＆安培;＆安培; [＆lt; offset-x＆gt; ＆LT;偏移-Y GT;   ＆LT;模糊的半径大于;? ＆LT;扩频半径大于;? ＆lt;滤色＆GT ;? ]]＃

  • 插入：省略，不想要它。
  • 的＆LT;偏移-X GT; ＆lt; offset-y＆gt; ：0 0，因为我们不想移动阴影。
  • ＆lt; blur-radius＆gt; ：0，因为我们不想要模糊阴影。
  • ＆lt; spread-radius＆gt; ：10px，因为我们希望阴影扩展为10px宽。
  • ＆lt; color＆gt; ：#d0d0ff
  

你怎么可能让边框变得透明和阴影   有色，你有相反的结果吗？

这是因为border-spacing定义了外边框的阴影（除非您使用inset）

来自spec：

  

外部阴影投射阴影，就像元素的边框一样   是不透明的。阴影仅绘制在边界外。

答案 1 :(得分：0)

我只是使用一个容器div并用一些填充物放置边框：

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

Html变为：

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

其他CSS：

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

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


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

显然，将概述的名称更改为更相关的名称。

相关问题
最新问题