css - 如何使带有 CSS 的 HTML Slider 留在框中？

Question

我有这个表格/ slider 错误，但我不确定如何修复它以保留在表格中: http://jsfiddle.net/WH7Kf/1/ 我的 CSS 是:

input[type='range']{
    -webkit-appearance: none !important;
    margin: 0px;
    padding: 0px;
    background: #000;
    height: 100px;
    width: 400px;
    border-bottom: #333 1px solid;
    -webkit-transform: rotate(90deg);
}

我的 HTML5 是:

<table>
<tr>
    <td>VOLUME</td>
    <td>TONE</td>
</tr>
<tr>
    <td>volume:<input id="volumeslider" type="range" min="0" max="100" step=".1"></td>
    <td><input id="tone" type="range" min="40" max="17000" step="1">    //seekslider</td>
</tr>
</table>

Answer 1

翻 table ，再翻最后的话: http://jsfiddle.net/WH7Kf/14/

table{
    position:absolute;
    top:150px;
    -webkit-transform: rotate(90deg);
}

input[type='range']{
            position: relative;
            -webkit-appearance: none !important;
            margin: 0px;
            padding: 0px;
            background: #000;
            height: 100px;
            width: 400px;
            border-bottom: #333 1px solid;
        }

        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            background: radial-gradient(#FFF, #333);
            height:110px;
            width:15px;
            border-radius:100%;
            cursor:pointer;
        }