在表格中显示垂直HTML5范围

Question

我正在尝试让HTML5范围在表格中显示为垂直，但我无法弄清楚如何做到这一点。事实上，当范围在桌子外面时，没有问题，但是当它在里面时，不可能让它垂直！烦人...

<table>
<tr>
<div class="slide"><th><input type="range" min="0" max="100" id="slider1"></th></div>
</tr>
</table>

和css：

slide {
    -webkit-appearance: slider-vertical;
    -moz-transfrom: rotate(270deg);
}

Answer 1

您的代码有四个问题：

1. 您的加价无效。您不能将div元素作为tr元素的直接子元素。
2. 你的CSS类选择器是错误的。您在开头缺少.。
3. 您应该将样式应用于范围元素，而不是应用于包装div。
4. th元素只应用于table-head thead元素中的列。根据您的示例代码判断，情况并非如此，那么您应该使用td元素。

<强>标记：

<table>
<tr>
<td><input class="slide" type="range" min="0" max="100" id="slider1"></td>
</tr>
</table>

<强> CSS：

.slide {
    -webkit-appearance: slider-vertical;
    -moz-transfrom: rotate(270deg);
}

Demo