Question

我找到了一个关于如何通过创建另一个类.tablecontainer来修复带滚动条的表的解决方案，但在这种情况下，我需要在一列上添加一个下拉列表，以便我的表根据在下拉单元格列中，我需要根据下拉单元格的高度调整所有行。

该州的屏幕截图是：

这是我的代码：

<head>
    <style type="text/css">
    table {
        table-layout: fixed;
        word-wrap: break-word;
        vertical-align: central;
    }
    .tablecontainer {
        width: 1000px;
        overflow: hidden;
    }
    tr {
        display: block;
    }
    th, td {
        width: 500 px;
    }
    tbody {
        display: block;
        height: 400px;
        overflow: auto;
    }
    .table tbody > tr > td.vert-align {
        vertical-align: middle;
    }
    </style>
</head>
<body>

和HTML：

<div class="container" style="padding: 70px">
    <h3 style="font-family:'Century Gothic'"></h3>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th style= "column-width:100px; text-align:center">Employee No.</th>
                <th style= "column-width:200px; text-align:center">Employee Name</th>
                <th style= "column-width:100px; text-align:center"">Status</th>
                <th style= "column-width:100px; text-align:center"">Training Title</th>
                <th style= "column-width:100px; text-align:center"">Action</th>
            </tr>
        </thead>
        <tbody>


            <tr>
                <td style= "column-width:100px; celltext-align:center">12345</td>
                <td style= "column-width:200px; text-align:center">Lardino, Bryan S.</td>
                <td style= "column-width:100px; text-align:center">For Approval</td>
                <td style= "column-width:100px; text-align:center">Wave Training</td>
                <td style= "column-width:100px; text-align:center"><div class="btn-group">
                    <button type="button" class="btn btn-default">Action</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Approved</a></li>
                        <li><a href="#">Disapproved</a></li>
                    </ul>
                </div></td>
            </tr>
            <tr>
                <td style= "column-width:100px; text-align:center">12345</td>
                <td style= "column-width:200px; text-align:center">Lardino, Bryan S.</td>
                <td style= "column-width:100px; text-align:center">For Approval</td>
                <td style= "column-width:100px; text-align:center">Wave Training</td>
                <td style= "column-width:100px; text-align:center"><div class="btn-group">
                    <button type="button" class="btn btn-default">Action</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Approved</a></li>
                        <li><a href="#">Disapproved</a></li>
                    </ul>
                </div></td>
            </tr>

        </tbody>
    </table>
    <div class="row" style="height: 50px">
        <a class="btn btn-primary btn-default pull-right" href="#")>Submit</a>
    </div>
</div>
</body>

在固定表上冲突的列高度溢出。在MVC 4中使用bootstrap 3

0 个答案: