1

I have a table which has a lot of columns and hence causes a vertical scroll. How do I make a div sibling of the table expand to the full width of that table.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
  <div style='background: green'>
    foobarbaz
  </div>
  <table>
    <tr>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
    </tr>
  </table>
</body>
</html>

As you'll see here, the div width is only equal to the width of the body. I need the div width to match the width of the overflowing table.

Thanks

Akshay Rawat
  • 4,714
  • 5
  • 40
  • 65

2 Answers2

5

You can wrap both the div and table in another div, and give this div either float: left or display: inline-block:

<div style="float: left">
  <div style='background: green'> foobarbaz </div>
  <table>
    ..
  </table>
</div>

Your original code: http://jsfiddle.net/9yKPT/
Fixed with float: left: http://jsfiddle.net/9yKPT/1/
Fixed with display: inline-block: http://jsfiddle.net/9yKPT/2/

thirtydot
  • 224,678
  • 48
  • 389
  • 349
0

css : add a ID to div and to table, then do :

var w = setInterval(function() {
   var $div = document.getElementById("divID").style.width;
   document.getElementById("tableID").style.width = $div;
},1);
John
  • 7,500
  • 16
  • 62
  • 95