css - 在表格中显示垂直 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 类选择器是错误的。您.在开头缺少 a 。
3. 您应该将样式应用于范围元素，而不是包装 div。
4. 该th元素应仅用于 table-headthead元素中的列。从您的示例代码来看，情况并非如此，那么您应该改用该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);
}

演示