Question

我在html5中有一张表。其中一列是描述栏。因为我使用的是bootstrap类"col-md-2"。描述很长很长。我想为该特定<td>启用垂直滚动。我尝试过使用style="overflow-y: auto;"和td。但是，它似乎不起作用。

HTML文件：

<div class="panel-body">
    <table ng-if="applicationListAdmin" st-table="applicationTable" class="table table-striped">
        <tr>
            <th>Application No.</th>
            <th>Project Title</th>
            <th>Project Description</th>
            <!-- <th>DataSet Available</th> -->
            <!-- <th>Impact</th> -->
            <th>Number of Interns</th>
            <th>Expected SkillSet</th>
            <th>Software Licenses Needed</th>
            <th>Hardware Requirements</th>
            <th>Status</th>
            <th>Update</th>
        </tr>
        <tbody>
            <tr ng-repeat="application in applicationListAdmin">

                <td class="col-md-2">{{application.number}}</td>
                <td class="col-md-2">{{application.title}}</td>
                <td class="col-md-2" style="overflow-y: auto;">{{application.description}}</td>

                <td class="col-md-1">{{application.numberOfInterns}}</td>
                <td class="col-md-2">{{application.skillSet}}</td>
                <td class="col-md-2">{{application.software}}</td>
                <td class="col-md-2">{{application.hardware}}</td>
                <td class="col-md-2">{{application.state}}</td>

                <td>
                    <i class="material-icons" ng-click="view(application._id)">receipt</i>&nbsp;&nbsp;

                    <i class="material-icons" ng-click='edit(application._id)' style="color:red">edit</i>&nbsp;&nbsp;
                    <i class="material-icons" ng-click="remove(application._id)" style="color:red">delete</i>

                </td>
            </tr>
        </tbody>
    </table>

表的Css值：

th,td {
    /*border-style: solid;
    border-width: 5px;
    border-color: #BCBCBC;*/
    word-wrap: break-word;
}

table {
    table-layout: fixed;
    width: 100%;
}

Answer 1

您无法将高度设置为表td。但你可以做的是将内容放在div中并将该div放在td

中

＆＃13;

class Food (val name: String, val des: String, val image: Int)

＆＃13;

Answer 2

要显示滚动，您需要在元素上设置高度。尝试：

    <td class="col-md-2" style="overflow-y: auto;height: 100px;display:block;">random text</td>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2165/

垂直滚动条到表格每行的一列

2 个答案: