CODEWITHSUNDEEP
htmlcsswebformsscroll
ZSH
ZSH

Reputation: 661

Show scroll on html table

I want show scroll bar on html table and i have problem when show data in table. This code example:jsfiddle. In this example when add row in table,data displayed not correctly.Please help.

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

Upvotes: 0

Views: 368

Answers (2)

Ahmed Ali
Ahmed Ali

Reputation: 1007

Try this Code

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

or check the JSFiddle

Upvotes: 1

eevaa
eevaa

Reputation: 1457

You did not assign any width to your tr-Elements (except for those in the table header), so they are just as wide as their content. This has nothing to do with the scroll bar.

Try this in your js-file:

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

And this in your css:

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

Now all cells in one column should have the same width.

Upvotes: 0

Related Questions