宽度和高度的vmin与td元素

Question

on my site我试图创建一个可扩展的ui othello游戏。每块板都应该是正方形。我使用表格作为董事会的标记。我使用的CSS是

#board td
{
    background: #C38147;
    text-align: center;
    width: 12vmin;
    height: 12vmin;
}

宽度和高度应相同，但检查员会另外显示......

我试图删除x标记，希望它们会溢出，但没有骰子。

Answer 1

为什么不使用padding-bottom？

通过将padding-bottom设置为与宽度相同，可以创建一个正方形，然后通过将宽度设置为％，可以使它们响应：

.element {
    width: 10%;
    padding-bottom: 10%;
}

查看JSFiddle here

另外，使用<div>而不是<table>可能会更好。 - 表在各种情况下都有一些有趣的渲染问题，而且很难处理。

在使用表格时，您可能需要在border-collapse: collapse;标记上添加<table>，在单元格上添加display: inline-block;。