在表格中顯示垂直的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