0

I need to set a div's width dynamic, because I have a dynamic table inside that div, and when it has too many columns, I can't scroll horizontally with the bottom bar (not the DIV's one, the browser's one).

I've got this in my HTML file:

<div class="total">
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            ...
            <td>row 1, cell m</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            ...
            <td>row 2, cell m</td>
        </tr>
        ...
        <tr>
            <td>row n, cell 1</td>
            ...
            <td>row n, cell m</td>
        </tr>
    </table>
</div>​

and I have this in my css:

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
width:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
overflow: hidden;
}

Here there is a link with an example of what I'm doing:

LINK jsfiddle

How can I set the "total" div's width dynamic? This must work on IE7 Browser.

abierto
  • 1,447
  • 7
  • 29
  • 57
  • You can use jquery. Check this topic http://stackoverflow.com/questions/1015669/calculate-total-width-of-children-with-jquery – Maciej Małecki Jan 02 '13 at 15:12
  • Can't I do that only with css? – abierto Jan 02 '13 at 15:21
  • I cannot remember the SO question I saw that was similar to this, but I could have sworn the solution was they set width and height to 100% in both the and elements. – huzzah Jan 02 '13 at 15:27

3 Answers3

2

You can't do this with a border or any block formatting properties on the <div>, see a stripped-down version here: http://jsfiddle.net/MQ9MJ/1/

If you move these styles to the <table> and <td>s instead, it will work: http://jsfiddle.net/MQ9MJ/3/

skyline3000
  • 7,639
  • 2
  • 24
  • 33
  • Ok, but I actually need to use my table inside that DIV, because the whole website uses that DIV as its main container. Do you suggest to change the "total" DIV into a Table? – abierto Jan 02 '13 at 15:56
  • 1
    That's one way to do it, however, I would probably just change .total to have `display: table;` since you want the layout of a table but don't actually want to semantically use a table element. See here: http://jsfiddle.net/MQ9MJ/4/ – skyline3000 Jan 02 '13 at 16:45
  • 'display: table;' do not work on IE7, I just tested it... Is there anything more to do what I need? I have to make it works on IE7... – abierto Jan 03 '13 at 07:38
  • Here is a webpage that details which display properties work in each browser for your reference: quirksmode.org/css/display.html. I believe you could also accomplish this with `display:inline-block;` but I'm not sure how it will work in IE7 (I don't have it installed anymore) but this site says it might work. Other than that, you will have to use a `` element. I'm not sure how your site is structured, but if you could, I would opt to include a little javascript only served to IE7 users that changes the div to a table that way only a small % of users will have to get that nastiness.
     – skyline3000 Jan 03 '13 at 17:07
0

You need to get rid of the overflow:hidden property. Use overflow:auto instead, then your div will be scrollable.

omniflash
  • 191
  • 1
  • 14
  • I don't want to have bars INSIDE the DIV. I need that the DIV width "grows" when the table becomes "longer". – abierto Jan 02 '13 at 15:20
0

Try this CSS

.total{
     position:relative;
     top:50px;
     margin: 0 auto;
     background-color:#eeeeee;
     height:auto;
     border:2px solid #000;
     border-color:rgb(82,115,154);
     overflow: none;
}
td{
    min-width:50px;
}
Saju
  • 3,201
  • 2
  • 23
  • 28
  • This allow me to scroll the table with my browser's scroll bar, but my DIV's width is still fixed, not dynamic. My main issue was to have a variable width on my DIV. – abierto Jan 02 '13 at 15:49