Table width 100% of scrollable div

Question

How do I set tables to 100% width of the actual container div width?

Currently the long table expands the container div and the small table has just the width of the defined width of the div (400px in this case) and not 400px + x like the other table:

Here is a working fiddle.

And here the sample code:

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px;
}

table {
  width: 100%;
}

table td {
  white-space: nowrap;
  border: 1px solid black;
}

<div id="scroller">
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>short text</td>
    </tr>
  </table>
</div>

NOTE

This is not a dupe of set-width-of-inner-div-on-scrollable-element-to-100-of-scrollable-width, because I need to use tables, not divs.

Answer 1

You can try this simple jQuery If you want to.

Live Fiddle

$(function(){
  var maxWidth = 0;
  $("#scroller> table").each(function() {
    if ($(this).width() > maxWidth) {
      maxWidth = $(this).width();
    }
  });

  $("#scroller> table").width(maxWidth);
  });

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px;
}

table {
  width: 100%;
}

table td {
  white-space: nowrap;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller">
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>short text</td>
    </tr>
  </table>
</div>

Answer 2

Are you looking for something basics like this? Please tell me in comment.

Edit: Can you remove the closing table tag, to wrap all td into the same table?

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px
}

table {
  width: 100%;
  border: 1px solid black
}

td{
  white-space: nowrap;
  width:100%;
  border: 1px solid black
}

<div id="scroller">
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>

    <tr>
      <td>short text</td>
    </tr>
  </table>
</div>

2nd edit: As told in comments, it looks like there is no easy way to copy the width of another element in pure css.

There is a new css capability called attr that comes to resolve this problem. It can read html attributes values of elements.

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. https://developer.mozilla.org/en-US/docs/Web/CSS/attr

In this case, the td does not have any attributes currently set, and no direct html modifications are allowed.

So here what I would do as a fix, a javascript statement.

It copy the width of the first td, create a inline style in the second and set the same width in px. It works, but this is NOT responsive!

To make it responsive, you would have to set a global event handler onchange, or an eventListener, and do the statment again at any data reload or any window size change. This can lag a bit, so it is not recommended, but it is used a lot anyway, including in mainstream sites.

scroller.children[1].children[0].children[0].children[0].setAttribute(  "style","min-width:"+scroller.children[0].children[0].children[0].children[0].clientWidth + "px")

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px
}

table {
  width: 100%;
  border: 1px solid black
}

td{
  white-space: nowrap;
  width:100%;
  border: 1px solid black
}

<div id="scroller">
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>short text</td>
    </tr>
  </table>
</div>

This won't do the job if any of your next td are longer than the first one, but again this can be resolved with javascript by checking all td width or length in a foreach loop, to set them to the biggest. Can be provided, but largely doable?

To keep it smooth while javascript is disabled:

<noscript>
   <style>td{white-space:wrap}</style>
</noscript>

Answer 3

Try this:

Remove white-space: nowrap; and change the width from table to 100%