Question

我有一个弹出窗口，显示两个不同的表格。不同的用户会看到不同的选项（表行），所以我需要两个看起来像一个的独立表。选项会变得复杂，所以最好使用两个表。

两个表格都将显示在叠加层中，因此空间有限，需要在溢出内部。

这是一个JSFiddle：http://jsfiddle.net/8h5axkbj/1/

蓝色表格是白表右侧所需的表格。我尝试过花车和直排座，但我觉得我错过了什么。

<div id="popUpTableWrap">
<table class="table fl">
<thead>
    <tr>
        <th>Daily Hours</th>
        <th><div class="dayTimeWidth">Sun</div></th>
        <th><div class="dayTimeWidth">Mon</div></th>
        <th><div class="dayTimeWidth">Tues</div></th>
        <th><div class="dayTimeWidth">Wed</div></th>
        <th><div class="dayTimeWidth">Thu</div></th>
        <th><div class="dayTimeWidth">Fri</div></th>
        <th><div class="dayTimeWidth">Sat</div></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Coverage Start</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
    </tr>
    <tr>
        <td>Break Start</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
    </tr>
    <tr>
        <td>Break End</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
    </tr>
    <tr>
        <td>Coverage End</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>

    </tr>
    <tr>
        <td>Reaction</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>

    </tr>
    <tr>
        <td>Resolution</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>

    </tr>
    <tr>
        <td>Critical - React</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>

    </tr>
    <tr>
        <td>Critical - Resolve</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>

    </tr>
    <tr>
        <td>Urgent - Resolve</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>

    </tr>
    <tr>
        <td>Urgent - Resolve</td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
        <td><input type="text" class="form-input" value="00:00"></td>
    </tr>
</tbody>
</table>
<table class="table fl">
    <thead>
    <tr>
        <th class="nbd-title" colspan="2">Next Business Day</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="nbd">NBD</td>
        <td class="nbd">
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="nbd">NBD Critical</td>
        <td class="nbd">
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="nbd">NBD Urgent</td>
        <td class="nbd">
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="nbd">NBD Non-Urgent</td>
        <td class="nbd">
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="nbd">NBD Appointment</td>
        <td class="nbd">
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="nbd">NBD Exception A</td>
        <td class="nbd">
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="nbd">NBD Exception B</td>
        <td class="nbd">
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="nbd">Severity</td>
        <td class="nbd">XXXX</td>
    </tr>
    <tr>
        <td class="nbd">Holiday Coverage</td>
        <td class="nbd">
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="nbd">Business Process</td>
        <td class="nbd">XXXX</td>
    </tr>
    </tbody>
</table>
<div class="clr"></div>
</div>

Answer 1

您可以通过将两个表设置为inline-block来显示。

table.one {width:650px; display:inline-block;}
table.two {width:150px; display:inline-block;}

http://jsfiddle.net/8h5axkbj/6/

您需要确保两个表具有相同的行数，否则它们将无法正确对齐。

Answer 2

Float left for both tables helps to align tables properly.

Click here

Answer 3

那里有很多代码..

我更新了您的代码，并在table

中添加了几行css和两个类

.table1 {
    width: 80%;
}

.table2 {
    width: 20%;
}

.fl {
    float: left;
}
.table {
    display: block;
    position: relative;
}

这是你的小提琴： http://jsfiddle.net/8h5axkbj/7/

Answer 4

错误.. CSS中的类是“fll”和“flr”。将html中的“fl”和“fr”更改为这些类将解决此问题。

http://jsfiddle.net/josangel555/8h5axkbj/8/

溢出里面的并排HTML表

4 个答案: