user1692333
user1692333

Reputation: 2597

How to set div width inside the td as parent?

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.

Upvotes: 1

Views: 3981

Answers (2)

ndcweb
ndcweb

Reputation: 725

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;
}

Upvotes: 1

Matthias Nefzger
Matthias Nefzger

Reputation: 114

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>

Upvotes: 0

Related Questions