个人中心
gpt4 book ai didi

html - 边框间距属性不能按预期工作

转载 作者：太空宇宙 更新时间：2023-11-03 23:51:08 25 4
gpt4 key购买 nike

我正在尝试制作下表: table

我有一个外边框和一个底部边框。我没问题，我唯一的问题是我无法获得外边框和表格之间的空间(20 px 的空间)当我使用 border-spacing 时，它不起作用。

非常感谢您的帮助。

代码示例如下: 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>
      </tr>
    </table>

  </body>
</html>

最佳答案

为什么 border-spacing 不起作用？

border-spacing 不起作用，因为来自 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).

此外，border-spacing 是所有单元格之间的间距，而不仅仅是边框单元格和表格之间的间距，因此这不是您想要的。

方案一:包装器

#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 */;

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

浏览器支持

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

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

方案三:盒子阴影

.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 */;

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

浏览器支持

使用供应商前缀(-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。然后，您失去了 table 上的酒吧。
  • 在 Chrome 上，透明边框不会阻止表格中的栏，它会到达框阴影。我认为这是一个错误，可以使用白色边框而不是透明边框来修复。

附录:box-shadow解决方案是如何工作的？

参见 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:省略，不想要。
  • :0 0，因为我们不想移动阴影。
  • :0，因为我们不想要模糊的阴影。
  • :10px，因为我们希望阴影扩展到 10px 宽。
  • :#d0d0ff

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

那是因为 border-spacing 定义了阴影外边界(除非你使用inset)

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

关于html - 边框间距属性不能按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20059103/

25 4 0
文章推荐： python - 如何让 Apache/mod_python 进程收集它的僵尸进程？
文章推荐： node.js - 使用mongoose连接到mongoDB : neither on error nor once open are triggered
文章推荐： python - wxpython - 垂直扩展列表控件而不是水平扩展
文章推荐： node.js - 如何在docker中创建live-reload开发环境？ (NodeJS、Redis 和 Vue)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com