Adding horizontal scroll to a table whose columns are dynamically created

Question

I have a html table as below:

 <div id="myDiv" class="table">
<table class="table table-striped table-bordered">
<thead>
    <tr data-bind="foreach: columnNames">
        <th> <span data-bind="text: $data"></span>

        </th>
    </tr>
</thead>
<tbody data-bind="foreach: data">
    <tr data-bind="foreach: $parent.columnNames">
        <td style="width:20px"><input type="text" class="form-control textbox"/> </td>            
    </tr>
    <tr>
         <td>
    <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
  </td>
    </tr>
</tbody>
</table>
</div>

The columns to these are generated dynamically via a knockout JS code. The columns can be ranging from 3 (minimum) to 20 something. So I am trying to add a horizontal scrollbar to it so that user can scroll to right. I also want to set a fixed width of column say 20%. Below is my JS fiddle which I have.

https://jsfiddle.net/aman1981/6fjcuhcf/41/

But I have tried many changes to the css but its not adding scroll not its keeping the columns width fixed.

Please see I have used suggestions as per Add horizontal scrollbar to html table

But its not adding scroll. What else am I missing here?

When I look at the jsfiddle, the table seems to scroll fine? — Sensoray, Mar 26 '18 at 19:23
I am using chrome browser version 62. Also here is the image I am seeing: https://imgur.com/a/YXB6O — kaka1234, Mar 26 '18 at 19:26
Right now you have each column set to 20px width, but the minimum size they can be is 62px because of the column headers. It seems to scroll when the screen is small enough. Are you wanting the columns to be wider? — Sensoray, Mar 27 '18 at 12:32
@PaigeMeinke the scroll is working now. I had to clear my browser cache. Not sure why it was caching it. Now one issue which still persists is the width of the column. When I set the width of the td say 50px or anything. It just applies to the first column. I want all my columns to be of the same width. See this updated fiddle: https://jsfiddle.net/aman1981/6fjcuhcf/55/ — kaka1234, Mar 27 '18 at 13:21

score 0 · Accepted Answer · answered Mar 28 '18 at 12:23

0

I was able to add scroll and make my columns fixed width using this css:

<style>
.table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width:1000px;
}
.table td,th {
    display:inline-block;
    width: 180px !important;
}

answered Mar 28 '18 at 12:23

kaka1234

770
3
9
30

Adding horizontal scroll to a table whose columns are dynamically created

1 Answers1