HTML表格的Buggy CSS

Question

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

好的，现在是具体的。

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

基本上，它是一个HTML表格，带有一些CSS。我正在使用崩溃的东西使边框1 px，BTW。

但是，当我在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. 我已经设法将一个简单的“鼠标悬停图像”效果放在“？”上icon（在.td-bluebg类的单元格中）。但是，悬停图像显示距表格边界2px。是否可以将悬停图像与桌边距离仅1px？我试过这样做，但唉，没有运气。我尝试找到一个解决方案几乎打破了整个样式，但我恢复了旧版本的CSS代码用于悬停效果，并随机地在/* */评论括号中放置了一些不必要的CSS声明，这帮助我恢复了这个错误。那么，你将如何将悬停显示的图像与桌面边界分开1px？
4. 我似乎无法将.td-collapse的单元格大小设置为我想要的...它只是延伸到表的末尾，而不是停留在它的末尾并且具有预期的大小...修复？
5. 在当前的代码中，我已声明：

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

   如果我想回到单个单元格（td's）的1px边框，有没有办法隐藏某些单个单元格的左边框和/或右边框，如果该选项被声明为（即如果我设置table.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属性。我为divs放了桌子，我建议你也这样做。

您可以使用border-left，border-right等为元素的每一侧指定特定的边框属性。速记属性类似于border:1px 2px 3px 2px，这意味着border:top right bottom left。有关它的更多信息，请访问w3学校网站。

如果我错过了什么，请随意评论:)

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

Answer 2

关于额外的图像空间，默认情况下，图像将自己置于其线条的文本基线上，而不是它们线条的底部。

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