在html表格上显示滚动

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

    <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>

.固定标题{
宽度：100%；
表布局：固定；
利润上限：30像素
}
#接受器
{
边框：1px纯黑；
浮动：对；
}
#表4，td{
文本对齐：右对齐；
}
#表接收装置{
显示：块；
位置：相对位置；
}
#桌体{
显示：块；
溢出：自动；
宽度：100%；
高度：100px；
}
复选框
名称
家庭
主题

---

您没有为tr元素指定任何宽度（表头中的元素除外），因此它们的宽度与其内容相同。这与滚动条无关

在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
    });
}
);

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

请尝试此代码

<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"/>

复选框
名称
家庭
主题

---

或者检查

如何显示数据？我在中添加完整的代码

<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"/>