CODEWITHSUNDEEP
htmlcsspanel
Eduard Pashchuk
Eduard Pashchuk

Reputation: 77

How to make a div to fit all available width even hidden with scroll?

I have a page with two panels. Second panel contains some large table so even with wrapped content it can't be displayed on full width window. Than I've added a horizontal scroll to fix this problem but it seems like div doesn't want to fit large table size.

Fiddle link

After some research I've found how to force second panel to fit the table size with this css change: 

.pane {
  display: table;
}

updated fiddle link

But there is another issue. The width of first and second panels are different. How to force the first panel to take all avaliable width even if it hidden with horizontal scroll?

Is there any pure html/css solution for this?

Upvotes: 2

Views: 978

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105903

As advised, use display:table;, it will allow container to shrink/expand according to content and beyond window's size.

But since you need also an overflow, you may add an extra wrapper in between to allow those children to grow beyond the window's width and match to the widest one, i gave it .buffer as a classname to give it some meaning:

example:

.list {
  overflow-x: auto;
}
.buffer {
  display: table;
}
.pane {
  border: 1px solid red;
  margin: 15px 0;
}
.pane .head {
  width: 100%;
  background: #959595;
}
.pane .body {
  width: 100%;
}
.pane .body table {
  border: 1px solid green;
}
<div class="list">
  <div class="buffer">
    <!-- this a buffer container to allow to beyond window's width if displayed as table element *-->
    <div class="pane">
      <div class="head">
        Pane 1 header
      </div>
      <div class="body">
        Some body
      </div>
    </div>
    <div class="pane">
      <div class="head">
        Pane 2 header
      </div>
      <div class="body">
        <table width="100%">
          <tbody>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>content</td>
              <td>content</td>
              <td>content</td>
              <td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/8cepsL09/6/

Upvotes: 1

DMuenstermann
DMuenstermann

Reputation: 31

It would also be possible to play around with something like e.g. 

padding-right: 3000px;
margin-right: -3000px;

which would extend the space used by the element. See https://www.sitepoint.com/css-extend-full-width-bars/ for more details...

Upvotes: 0

Tchopane
Tchopane

Reputation: 174

you can add this to your css

table {
   border-collapse:collapse; table-layout:fixed;
}
table td {
   border:solid 1px #fab; width:25%; word-wrap:break-word;
}

and adapt the width to the amount of columns.

EDIT: fiddle.js here

Upvotes: 0

Ryan
Ryan

Reputation: 531

Its NOT a pure html/css solution but it works

I've used jquery to get the width of the second and apply it to the first

$('#pane1').width($('#pane2').width())
.list {
  overflow-x: auto;
}
.pane {
   border: 1px solid red;
   width: 100%;
   margin: 15px 0;
   display: table;
}

.pane .head {
  width: 100%;
  background: #959595;
}

.pane .body {
  width: 100%;
}

.pane .body table {
  border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="pane" id="pane1">
    <div class="head">
      Pane 1 header
    </div>
    <div class="body">
      Some body
    </div>
  </div>
  <div class="pane" id="pane2">
    <div class="head">
      Pane 2 header
    </div>
    <div class="body">
      <table width="100%">
      <tbody>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
          <td>Fourth</td>
        </tr>
        <tr>
          <td>content</td>
          <td>content</td>
          <td>content</td>
          <td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
        </tr>
      </tbody>
      </table>
    </div>
  </div>
</div>

You'll need to add in jquery to your site and add id's to your panes (you can use other ways of accessing your panes, but I find that ids are easist)

Upvotes: 1

Related Questions