css - 在表格中显示垂直 HTML5 范围

Question

我试图让 HTML5 范围在表格内显示为垂直，但我不知道该怎么做。其实当range在表格外面的时候没问题，但是当范围在里面的时候，就不可能垂直了!烦人的...

<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 元素只能用于表头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