Question

我想在html表上显示滚动条，我在表格中显示数据时遇到问题。此代码示例：jsfiddle。在此示例中，当在表中添加行时，数据显示不正确。请帮助。

    <style>
.fixed_headers {
 width:100%;
 table-layout: fixed;
margin-top: 30px
 }
#tableRecivers
{
    border:1px solid black;
    float:right;
}

  #tableRecivers th, td {
    text-align: right;
  }
 #tableRecivers  thead tr {
      display: block;
      position: relative;
  }
  #tableRecivers tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 100px;
}
</style>

<div style="width: 94%; float: right;height: 100%">
    <table id="tableRecivers"  style="height: 100%" class="fixed_headers">
        <thead>
            <tr class="ui-widget-header" style="text-align: center">
                <th style="width: 3%">Checkbox</th>
                <th style="width: 15%">Name</th>
                <th style="width: 50px">Family</th>
                <th style="width: 50px">Subject</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

<input type="button" id="add" value="Add Row"/>
    <script>

Answer 1

试用此代码

<div style="width: 94%; float: right;height: 100%">
<table id="tableRecivers"  style="height: 100%" class="fixed_headers">
        <tr class="ui-widget-header" style="text-align: center">
            <th style="width: 3%">Checkbox</th>
            <th style="width: 15%">Name</th>
            <th style="width: 50px">Family</th>
            <th style="width: 50px">Subject</th>
        </tr>
</table>
</div>

<input type="button" id="add" value="Add Row"/>

或查看JSFiddle

Answer 2

您没有为tr-Elements分配任何宽度（表头中的那些除外），因此它们与其内容一样宽。这与滚动条无关。

在你的js文件中试试这个：

$(function() {
    $("#add").click(function() {

        // row1
        var tbody = $("#tableRecivers tbody");
        var tr = "<tr>";
        tr += "<td class="checkbox">" + "<input type='checkbox'/></td>";
        tr += "<td class="name">Name 1</td>";
        tr += "<td class="family">Family 1</td>";
        tr += "<td class="subject">Subjec 1</td>";
        tr += "</tr>";
        tbody.append(tr);

        //same for the other rows
    });
}
);

这在你的css中：

#tableRecivers td.checkbox {
    width: 3%;
}
#tableRecivers td.name {
    width: 15%;
}
#tableRecivers td.family{
    width: 50px;
}
#tableRecivers td.subject {
    width: 50px;
}

现在，一列中的所有单元格都应具有相同的宽度。

在html表上显示滚动

2 个答案: