如何在HTML / CSS中创建表内斜角？

Question

我正在设计这个论坛布局，我想出了一个很好的设计来绘制论坛表格，但是，我不确定这可以在HTML / CSS中轻松完成。

在我继续绘制整个布局之前，我需要知道这是否可以实现，以及如何，否则，我将不得不放弃这种效果并重新思考......

例如，我目前的设计就是这个：

此示例中的行具有相同的高度，但这只是一个示例。实际表格实际上会有不同的行高，代码需要考虑到这一点......

如何做到这一点？

Answer 1

CSS可以非常轻松地执行此类操作，前提是您不必在表大小增加时垂直缩放渐变。以下是您可以使用的示例，它将为您提供上面描述的效果。

更新：我不知何故没有看到斜面（我想我必须责怪它太晚了，我的视野太模糊了）。我必须放大才能真正看到它们，但我已经更新了我的解决方案以适应。您需要添加一个额外的“div”标签才能使此解决方案正常工作，但这是可能的，尽管我认为它不会影响图像显示的程度。虽然它会相当不错。在下面我添加了一些jQuery脚本，它将不再需要额外的<div />标记。

对于标记，您可以使用以下内容：

<table cellspacing="0">
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
</table>

在你的样式表中你会使用这样的东西：

td {
    border: 1px solid #777;
}

.bevel {
    background: url('img.png') top left repeat-x;
    margin: -1px;
    border-top: 1px solid #fbfbfb;
    border-left: 1px solid #fbfbfb;
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #e8e8e8;
}

.side {
    width: 30px;
}

.main {
    width: 170px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

对于图像，请将其宽1px。它将重复自身以适应细胞的宽度。如果你想让渐变垂直伸展，你就不走运了。 CSS无法缩放图像，只能重复它们。为了制作垂直缩放的背景图像，您需要使用噩梦标记或某种JavaScript来使其工作。

要摆脱<div />标记汤，可以使用jQuery插入标记，这样就不会使源代码混乱。您需要做的就是在outerBevel标签中添加“<td />”类，然后调用此jQuery脚本（如果您使用的是jQuery。我相信其他JavaScript API可以执行类似的操作）：

$('.outerBevel').wrapInner('<div class="bevel"></div>');

Answer 2

对于布局，标准HTML table标记可以完成所有这些操作，也适用于它。

要获得所需的边框效果，请在此处查看不同的CSS边框选项：http://www.w3schools.com/css/css_reference.asp#border

Answer 3

你可能想要做这样的事情：

table#mytable td {
  border-style: inset;
  border-width: 3px; /* or whatever width you want */
}