Question

不确定我是否正确编写了标题，但我正在使用div和溢出的固定列表布局。

我的大部分都在工作，但有一件事让我烦恼，我无法在溢出div的右侧看到边框看起来正确。

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

有什么想法吗？

#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上使用边框折叠？

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

border-collapse: collapse;

将边框添加到固定列div元素的右侧

1 个答案: