Html 如何固定第一列，并使其余列水平滚动

我可以添加滚动条，但我面临的问题是，当标题太大时，标题溢出，并且没有崩溃。我希望标题文本分解到下一行，其余列的高度应与标题相同

HTML:

当前工作代码在下面的fiddle链接中

正文{
字体：16像素Calibri；
}
桌子{
边界塌陷：分离；
边框-顶部：3像素纯色灰色；
}
运输署{
保证金：0；
边框：3像素纯色灰色；
边框-顶部-宽度：0像素；
/*空白：nowrap*/
高度：80像素；
}#
外层{
位置：绝对位置；
排名：0；
左：0；
右：5e米；
}#
innerdiv{
宽度：100%；
溢出-x：滚动；
左边距：5公尺；
溢出-y：可见；
底部填充：1像素；
}
校长{
位置：绝对位置；
宽度：5米；
左：0；
顶部：自动；
右边框：0像素无黑色；
边框-顶部-宽度：3像素；
/*仅与第一行相关*/
利润率-顶部：-3像素；
/*补偿上边框*/
换行：断开单词；
}
上校：以前{
内容：“行”；
}
.朗{
背景：黄色；
字母间距：1e m；
}

大吵大闹
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
2.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
3.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
4.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
5.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
6.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
7.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
8.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
9
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM

这里有一个解决方案：谢谢。但我认为高度不应该是固定的。我希望高度自动更新为行中的最高高度。我们不能这样做吗？据我所知，如果使用.headcol{position:absolute；}，则无法获得所需的输出。一旦你将使用位置：相对；它会起作用的。但这将违反您所需的其他功能。对不起:(

<div id="outerdiv">
    <div id="innerdiv">
        <table>
            <tr>
                <td class="headcol">Big Rowwwww1</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">2</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">3</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">4</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">5</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">6</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">7</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">8</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">9</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
        </table>
    </div>
</div>

 body {
        font:16px Calibri;
    }
    table {
        border-collapse:separate;
        border-top: 3px solid grey;
    }
    td {
        margin:0;
        border:3px solid grey;
        border-top-width:0px;
        white-space:nowrap;
    }
    #outerdiv {
        position: absolute;
        top: 0;
        left: 0;
        right: 5em;
    }
    #innerdiv {
        width: 100%;
        overflow-x:scroll;
        margin-left: 5em;
        overflow-y:visible;
        padding-bottom:1px;
    }
    .headcol {
        position:absolute;
        width:5em;
        left:0;
        top:auto;
        border-right: 0px none black;
        border-top-width:3px;
        /*only relevant for first row*/
        margin-top:-3px;
        /*compensate for top border*/
    }
    .headcol:before {
        content:'Row ';
    }
    .long {
        background:yellow;
        letter-spacing:1em;
    }