html - 在固定列 div 元素的右侧添加边框

Question

不确定我对标题的措辞是否正确，但我正在研究使用 div 和溢出的固定列表布局。

我的大部分工作正常，但有一件事困扰着我，我无法让溢出 div 右侧的边框看起来正确。

现在它只是空白，如果我添加一个 border-right 然后当你一直向右滚动时，你会得到一个双边框。左边也一样。

有什么想法吗？

https://jsfiddle.net/hsf6j8vh/

#content .outer
{
    padding:0;
    margin:0;
}
#content .inner
{
    overflow:auto;
}
#content table.dataFixedCol
{
    margin:0 4px 0 0;
    font-size:0.9em;
    border-left:1px solid #999999;
    border-right:1px solid #999999;
    float:left;
}
#content table.dataFixedCol th
{
    white-space:nowrap;
    text-align:left;
    vertical-align:top;
    padding:6px 7px 7px 7px;
    border-top:1px solid #999999;
    border-bottom:1px solid #999999;
    border-left:1px solid #dddddd;
    background:#eeeeee;
}
#content table.dataFixedCol td
{
    text-align:left;
    vertical-align:top;
    padding:6px 7px 7px 7px;
    border-top:1px solid #999999;
    border-bottom:1px solid #999999;
    border-left:1px solid #dddddd;
    white-space:normal;
    white-space:nowrap;
}
#content table.dataFixedCol th:first-child, #content table.dataFixedCol td:first-child
{
    border-left:none;
    padding-left:8px;
}

<div class="outer">
    <table class="dataFixedCol">
        <thead>
            <th>Room</th>
        </thead>
        <tbody>
            <tr>
                <td>Fooname</td>
            </tr>
            <tr>
                <td>Barname</td>
            </tr>
            <tr>
                <td>Barfoo</td>
            </tr>
            <tr>
                <td>Zorzor</td>
            </tr>
            <tr>
                <td>Lorname Ipsname</td>
            </tr>
        </tbody>
    </table>
    <div class="inner">
        <table class="dataFixedCol">
            <thead>
                <th>8-10</th>
                <th>10-12</th>
                <th>12-14</th>
                <th>14-16</th>
                <th>16-18</th>
                <th>18-20</th>
            </thead>
            <tbody>
                <tr>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                    <td>Already booked</td>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                    <td>Available for booking</td>
                </tr>
                <tr>
                    <td>Available for booking</td>
                    <td>Already booked</td>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                </tr>
                <tr>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                    <td>Already booked</td>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                    <td>Available for booking</td>
                </tr>
                <tr>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                    <td>Available for booking</td>
                    <td>Available for booking</td>
                    <td>Already booked</td>
                    <td>Already booked</td>
                </tr>
                <tr>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                    <td>Already booked</td>
                    <td>Already booked</td>
                    <td>Already booked</td>
                    <td>Available for booking</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

您需要在表格的 CSS 上使用 border-collapse 吗？

https://jsfiddle.net/hsf6j8vh/1/

border-collapse: collapse;