在表格中显示垂直的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. 您应该将样式应用于range元素，而不是包装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