0

My table columns for a table in Bootstrap are too small. I would like to be able to increase the width. If I put width as "auto" then it becomes too wide even on a desktop and I have to scroll horizontally. Weird thing is that the column width does not change whether its desktop or tablet. The table rows and header are generated using JavaScript and jQuery.

Each of my columns has in it an input textbox and one column is a select list.

Kirk Beard
  • 9,569
  • 12
  • 43
  • 47
Mike
  • 11
  • 3

1 Answers1

0

First of all, make sure you have correctly wrapped your page in a .container or .container-fluid. After that, try to size the columns as you usually do with your grid in Bootsrap, as you can read in this answer. You can make your table responsive wrapping it in a .table-responsive: when the viewport becomes too small, you'll have horizontal scrollbars.

Community
  • 1
  • 1
Alberto Bairati
  • 1
  • 1
  • 5
  • Tried that but no luck. What I would like is exactly what you stated. For desktops it should show without scrolling and on chromebook should scroll. What is interesting is that momentarily it does expand (the col) but then it shrinks immediately - perhaps conforming to its parent. – Mike Jan 31 '17 at 05:15
  • I have more than 12 columns so wondering if that has anything to do with this – Mike Jan 31 '17 at 08:10
  • Bootstrap has a 12 columns grid system, but tables in your pages can have more than 12 columns. In your case, I think that javascript is resizing your table structure, so you probably have to check your code and eventually use a script to set the columns width. – Alberto Bairati Jan 31 '17 at 10:27