不可能？ HTML< TD>鼠标悬停边框颜色更改与边框崩溃？ [英] Impossible? HTML <TD> mouseover border-color change with border-collapse?

问题描述

我希望有一个表格，其中所有边框（内部/外部）都是单个像素宽度，我通过在表格上设置边框折叠样式来实现此目的。

然后，我希望在每个TD单元上放置鼠标，将边框颜色更改为不同的颜色。如果表格边框没有被折叠，这可以正常工作。但是，如果您折叠边框，那么它将无法工作。

然而，如果我不折叠边框，那么我无法获得单个像素宽度边框！所以这是不可能的？编辑：澄清，当使用border-collapse，并设置TD边框颜色时，只有右边框和下边框被设置。

编辑编辑：我结束了实现这个改变鼠标悬停的背景。背景GIF是一个带边框的白色框。 UUUUGGH！尽管在所有浏览器中都能正常工作，但是......

解决方案

我意识到这是一个非常旧的帖子，如果它有帮助的话。

不知道如何获得带边框的背景图片，除非您对所有表格使用像素精确的宽度和高度细胞？

但另一种选择是使用轮廓而不是悬停边框。例如：

  table {border-collapse：collapse; } 
 table td {border：solid 1px gray; } 
 table td：hover {border：none;大纲：固体1px红色; } 
  

适用于除IE6以外的所有浏览器。

根据您使用的颜色，外观可能不太理想，但效果很好。

I have wish to have a table where all borders (internal/external) are a single pixel in width, I achieve this by setting the border-collapse style on the table.

Then I wish to onmouseover each TD cell, changing the border-color to a different color. This works fine if the table border has not been collapsed. But if you collapse the border then it fails to work.

However if I don't collapse the border then I can't get a single pixel width border!

So is this impossible?

EDIT: To clarify, when using border-collapse, and setting TD border color, only the right and bottom border are set.

EDIT EDIT: I ended up implementing this changing the background on mouseover. The background GIF is a white box with a border. UUUUGGH! Works perfectly in all browsers though ...

解决方案

I realize this is a really old post, but thought I'd contribute anyway in case it is helpful.

Don't know how you got a background image w/border to work unless you're using pixel-precise widths and heights for all table cells?

But another option is to use "outline" instead of border on hover. Ex.:

table { border-collapse: collapse; }
table td { border: solid 1px gray; }
table td:hover { border: none; outline: solid 1px red; }

Works in all browsers except IE6.

Depending on the color you use, the appearance might not be ideal but it works pretty well.

这篇关于不可能？ HTML< TD>鼠标悬停边框颜色更改与边框崩溃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！