I'm trying to create a table using HTML+Bootstrap CSS with Angularjs framework where if the table data reaches the end of the row, then create a horizontal scrollbar. Each row should take up exactly 1 line. How do I do this?

If I add css style onto the td element for currItem and play around with width and height, I can get it the way I want, but it depends on the screen size. Is there a way to do it to satisfy any size browser window? style="width:200px; height: 50px;display: block; overflow-x: scroll;

  

      
{{currItem}}