用于 HTML 表格的错误 CSS

Question

我是 HTML 和 CSS 的新手，我想我可以请你帮我解决我遇到的问题。

好的，现在具体说一下。

我正在使用以下代码：http://snipplr.com/view/50733/buggy-css-for-an-html-table-example/。

基本上，它是一个带有一些 CSS 样式的 HTML 表格。我正在使用折叠的东西使边框为 1 px，顺便说一句。

但是，当我在 Firefox 和 Chrome 中查看最终结果时，会弹出 5 个奇怪的问题：

1. 我似乎无法使表格达到我想要的大小。整体大小应为 688x27 像素（带有填充和边框），但在 Firefox 和 Chrome 中，大小不符合预期（我怀疑我的代码是错误的......）。它显示为 688x29px！

2. 由于某些奇怪的原因，我也无法将某些单元格的整体大小限制在我想要的范围内。这指的是 3 个单元格，其中仅包含一个图像（具有以下类的单元格：.td-bluebg、.td-description、.td-collapse）。图片的尺寸分别为 25x25、26x25 和 25x25px。我只是希望他们留在他们的表格单元格中，没有任何填充，并被 1px 表格边框包围。对于 .td-bluebg 单元格和整个表格，底部有额外的 2px（参见问题 1.），在 Chrome 中很容易发现（我正在尝试找到一种方法来摆脱它们）。

3. 我已经设法在“？”上组合了一个简单的“鼠标悬停图像”效果。图标（在 .td-bluebg 类的单元格中）。但是，悬停图像显示距离表格边框 2px。是否可以将悬停图像放置在距离表格边框仅 1 像素的位置？我试过这样做，但是很可惜，没有运气。 我试图找到解决方案的尝试几乎破坏了整个样式，但我恢复了旧版本的 CSS 代码以实现悬停效果，并在 /* */ 注释括号中随机放置了一些不必要的 CSS 声明，这帮助我恢复了这一点错误。 那么，如何让悬停显示的图像距离表格边框仅 1 像素？

4. 我似乎无法将 .td-collapse 的单元格大小设置为我想要的...打算...修复？

5. 在我声明的当前代码中：

   table.gridtable1 td {
   border-color: #219DEC; /* AnimeRulezzz blue */
   border-style: solid;
   border-width: 0px;
   

   如果我想返回单个单元格（td's）的 1px 边框，如果该选项被声明为（即如果我设置表.gridtable1 td {border-width: 1px;})?

附：对不起，意大利面条代码，正如我所说，我是一个完全的新手。 ^_^;

Answer 1

让我们看看。

请记住，margin、padding、border 和其他几个 CSS 属性会增加您的物理宽度和高度。因此，如果您已指定它们，它们将添加到您的 width 和 height 属性中。

为了限制单元格的大小，我建议您使用 CSS 来确保您的浏览器没有使用它自己的默认 CSS 属性。为您的单元格分配margin、padding 等属性，以确保没有任何额外的样式。

使用background-position 和相关的background 属性来微调您的风格。 w3 schools 有很棒的 CSS 和背景属性教程。

对于折叠单元格，检查您是否正确设置了height CSS 属性。 <table> 和 <td> 元素可能要求您在 HTML 中指定 height 属性。我为 div 删除了表，我建议你也这样做。

您可以使用border-left、border-right 等为元素的每一侧指定特定的边框属性。速记属性类似于border:1px 2px 3px 2px，表示border:top right bottom left。查看 w3 学校网站了解更多信息。

如果我遗漏了什么，请随时发表评论:)

编辑：我个人不喜欢您链接到的示例，因为它真的很长：\ 如果您给我们您的 HTML 页面（带有 CSS）而没有所有大块的 cmets 和内容，会更容易。只是简单的 HTML 和 CSS。

Answer 2

关于额外的图像空间，默认情况下，图像将自身放置在其行的文本基线上，而不是行的底部。

如果您的图像在其表格单元格中是独立的，您可以通过将display: block; 应用于它们来解决此问题。