1

I have simple table with Bootstrap. The problem is that there is a long line with text. I want to add bottom scroll to it so I created a div inside td and putted text there. To the div I added max-height: 75px; overflow:auto; width: auto; width: 100%; max-width: 100%; styles, but it still comes out...

image

P.S. Template is based on the percents so I cant add width in px.

user1692333
  • 2,461
  • 5
  • 32
  • 64
  • sorry whats the question? how to set div width? but you've set a div width of 'auto' inline? – atmd Apr 09 '15 at 10:09
  • @atmd how to set div width that it would be as parents – user1692333 Apr 09 '15 at 10:11
  • the div (unless overriden somewhere) would be a block level element and would automatically take up the full width of the 'td'. what are you trying to achieve? [The default for a div is to determine its width from its parent, and the default for a table cell is to determine its size depending on the size of its content](http://stackoverflow.com/questions/1110915/is-a-div-inside-a-td-a-bad-idea) – atmd Apr 09 '15 at 10:13

2 Answers2

1

I think this will solve your problem. If you want the column to be shorter, set some width to parent td.

.div-inside-td {
    height: 75px;
    max-width: 100%;
    overflow-x: scroll;
}
ndcweb
  • 725
  • 4
  • 10
0

Since you are using width:auto, the div will just use all the remaining space there is.
If you want to control the width of the "Permissons" column, you could use the grid system inside the table head like this:

<thead>
<tr>
  <th class="col-md-2">Group ID</th>
  <th class="col-md-2">Name</th>
  <th class="col-md-8">Permissons</th>
</tr>
</thead>
Matthias Nefzger
  • 104
  • 1
  • 7
  • `auto` was added just to overwrite if some other styles was there. But still, after adding classes it is not smaller. – user1692333 Apr 09 '15 at 10:21
  • Have a look at this fiddle: http://jsfiddle.net/52VtD/10969/ I added `table-layout: fixed` and `white-space: nowrap`. Is this what you want to achieve? – Matthias Nefzger Apr 09 '15 at 10:55