垂直仪表元素 HTML - 表格宽度答案

【问题标题】：Vertical Meter Element HTML - Table Width垂直仪表元素 HTML - 表格宽度
【发布时间】：2014-07-08 01:00:30
【问题描述】：

我想在 html 中创建一个垂直的 meter 元素。我使用了以下 css 表

meter {
  width: 1000px;
  height: 10px;
  transform: rotate(90deg);
}

这工作得很好，但是当我将meter 合并到table 中时，单元格的宽度是 1000 像素而不是 10 像素。我应该如何调整我的 html 或 css 以使表格的单元格正确适合仪表？ IE：我希望表格单元格采用 rotated 米的宽度和高度。 html：

<table width="100px" cellspacing="" cellpadding="0" border="">
  <td><meter max="120" value="55.93" title="Test"></meter></td>
</table>

当我向表格的td 元素添加宽度时，如下所示：

<table width="100px" cellspacing="" cellpadding="0" border="">
  <td width="10"><meter max="120" value="55.93" title="Test"></meter></td>
</table>

不会发生任何变化。非常感谢您的输入。

编辑：

我通过在我的仪表样式中使用-moz-orient: vertical; 行解决了这个问题。这意味着高度和宽度没有切换，因此我可以在不拉伸页面/表格的情况下延长高度。

【问题讨论】：

不要把它放在表格单元格中。表格单元格将按照元素的宽度，在本例中为 1000 像素。您也许可以给表格单元格一个“最大宽度：10px；！重要”，但它可能不起作用
@VikingBlooded 这是部分解决方案，但是当我使用 10,000 像素宽的仪表执行此操作时，页面会被拉伸（因为宽度超出了我的屏幕可以容纳的范围）。如何更普遍地解决这个问题？

标签： html css

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
    <style>
        .customtd
        {
            overflow: hidden;
            display: inline-block;
            white-space: nowrap;
        }
        meter
        {
            width: 500px;
            height: 10px;
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <table width="100px" cellspacing="" cellpadding="0" border="">
        <tr>
            <td width="10px" class="customtd">
                <meter max="120" value="55.93" title="Test"></meter>
            </td>
        </tr>
    </table>
    <table width="100px" cellspacing="" cellpadding="0" border="">
        <tr>
            <td>
                <meter max="120" value="55.93" title="Test"></meter>
            </td>
        </tr>
    </table>
</body>
</html>

【讨论】：

感谢您的意见！我发现（在我看来）一个更优雅的解决方案，我会写出来。