adding horizontal scroll bar to table cells

Question

I have a problem with table html (using bootstrap)

I have table with number of rows. In the last cell of every row i want to add horizontal scroll bar.

I upload my html page so you can see what i meaning - http://77.247.180.36/~pelegisr/sites/tours/res-org2.html

As you can see I have gray column called "Nights" that contain number of small tables. I would like to add X-scroll in each row so i could see all the mall blue tables.

I tried to add styles: "display: inline-block; overflow-x:scroll; white-space: nowrap;" without any luck...

score 0 · Answer 1 · answered Sep 17 '18 at 05:29

Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled.

This property can be true which will allow the table to scroll horizontally when needed (recommended), or any CSS unit, or a number (in which case it will be treated as a pixel measurement)

  $('#example').dataTable( {
  "scrollX": true
} );

Also you can check Add horizontal scrollbar to html table there is alternative solution

Thanks, but in my case i need horizontally scroll per each cell (and not for all the table - this i already have now...) — Roi, Sep 17 '18 at 05:33

score 0 · Answer 2 · answered Sep 17 '18 at 05:55

0

to add scrollbar in table cell, you can do something like this:

<table border="1" style="table-layout:fixed; width:500px">
  <tr>
    <td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

answered Sep 17 '18 at 05:55

Aagam Jain

1,546
1
10
18

Thanks, but i don't want to set width to my cell. The content is dynamic and i don't know what will be the width... – Roi Sep 17 '18 at 06:22

adding horizontal scroll bar to table cells

2 Answers2