How do I make the HTML Slider with CSS stay in the box?

Question

I have this table/slider error, but I'm not sure how to fix it to stay in the table: http://jsfiddle.net/WH7Kf/1/ My CSS is:

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);
}

My HTML5 is:

<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

Turn the table, then turn the words last: 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;
        }

Answer 2

I tried fiddling with the code and initially I thought that the slider's height would be a problem but then i realised it was the width. Use this and change the width as you wish (not 400px).

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