1

我试着做一个小论坛来训练一点网页设计。如何将该表设计更改为具有 3 维 (3D) 表？或者如果有任何解决方案来改进其设计，那可能会更好！

否则，欢迎批评！

在此处输入图像描述

/* Tableaux -------------------------------------------------------------------------------------*/
table {
    border-collapse: collapse;
}

pair {
    background-color: #efefef;
}

tr.impair {
    background-color: #fff;
}

th {
    color: #D89845;
    border: 1px solid #D89845;
    padding: 5px;
    font: normal 8pt verdana, helvetica, sans-serif;
}

td {
    border: 1px solid #ddd;
    padding: 5px;
    font: normal 8pt verdana, helvetica, sans-serif;
}

PS：我会保留最好的建议作为对主题的验证。

提前致谢。

4

2 回答 2

1

您可以使用 box-shadow 是为任何对象赋予 3d 外观和感觉的最佳解决方案。

box-shadow 使用浏览器特定的前缀，如 -webkit、-o、-moz 等。在这里，我只是提供了链接，您可以在其中找到更多信息并研究它是如何工作的。我也多次创建了这种只有 3d 感觉的对象。
链接到 box-shadow。

于 2013-09-09T16:15:57.203 回答
0

也许你可以用这个做任何事情，

    CSS:
.gridtable {
border:1px solid #000000;
height:149px;
width:342px;
overflow-x: scroll;
}
.fixedcell {
height:30px;
padding:0 2 0 2px;
background-color:#C2BFA5;
border-left:1px solid #E1E0D2;
border-top:1px solid #E1E0D2;
border-right:1px solid #8D8961;
border-bottom:1px solid #8D8961;
}
.gridcell {
height:30px;
background-color:#ffffff;
padding:0 2 0 2px;
border-right:1px solid #C0C0C0;
border-bottom:1px solid #C0C0C0;
}

编辑 3d 效果链接：http ://www.w3schools.com/cssref/pr_border-style.asp

于 2013-09-09T14:40:58.007 回答