使用HTML中的两种不同颜色将单元格表拆分为两个三角形

Question

我正在填写表格，每个单元格代表状态：NULL，a，b，a＆amp;湾

我打算用（背景？）颜色来提供这些信息。使NULL细胞为白色，细胞为蓝色，b细胞为红色，并且为＆amp; b细胞细胞分为两个三角形，一个红色，一个蓝色。我试着让细胞呈紫色（紫色=红色+蓝色），但它不够直观。

此外，由于表格更大，并且在表格的其余部分中包含所有类型的数据，因此我不知道单元格的大小。

我试图制作一个红色和蓝色的图像并尝试将其添加为背景，但它不会伸展以适应单元格的大小。

我尝试将图片添加为<img src...>，但又一次不知道单元格的大小，它最终强加了每个自己的大小并且看起来很难看。

我已经使用Google搜索，看起来CSS3即将推出可能会让细胞背景延伸。但是，与此同时，还有什么可以做的吗？

Answer 1

实际上，你不能拉伸图像背景（至少不能没有CSS3或一些javascript脚本）Related。

我猜一个方格的平铺图案（2x2正方形，半蓝半红），或垂直或水平条纹，是最简单的方法......我怀疑这看起来会很漂亮。

Answer 2

我只是切换到可以平铺的东西......例如交替的彩色斜条纹。

Answer 3

在td中使用图像（宽度/高度= 100％）制作div（宽度/高度= 0）。 （div必须从0开始，因此它不会使单元格更大）创建一个遍及每个单元格的jquery，并将内部div =的大小设置为包含td的大小。不确定你看到了多少结果，所以这对于成千上万的细胞来说可能是不切实际的，但你必须试着看。如果您需要帮助我可以提供帮助。

Answer 4

为了获得你想要的效果，CSS3可能是你最好的选择。查看CSS3渐变，您可以在背景中使用它。它们比图像拉伸更好一些。甚至IE也会用它的过滤系统来做，虽然没有版本可以做对角线，所以它必须是IE的水平或垂直。根据您预期支持的浏览器，这对您来说可能是也可能不是一个大问题。

您也可以在<img>标签的字段中粘贴图像，设置较低的z-index，并将height和width属性设置为100％。这应该有效，尽管它确实增加了无关的标记并且可能更难维护。