0

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>

4

2 に答える 2

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を確認してください

于 2013-06-23T14:51:43.573 に答える
0

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

そしてこれはあなたのcssにあります：

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

これで、1 つの列のすべてのセルが同じ幅になるはずです。

于 2013-06-23T14:44:32.473 に答える