HTML and CSS table overflow not working

Question

I'm trying to make an table with an auto overflow, but that doesn't seem to work.

What I have now:

<div class="panel-group col-sm-offset-1 col-sm-10">
  <div class="panel panel-default">
    <div class="panel-heading">

      <i class="fa fa-folder-open-o fa-fw"></i>
        <strong>Chatbox</strong> 

    </div>

    <div id="forum4" class="panel-collapse collapse in" style="height:248px;">           

      <div class="table-responsive">

        <table class="table table-hover" style="overflow:auto;max-height:248px;">
          <thead>
            <tr>
              <th style="width:5%"></th>
              <th style="width:81%;"></th>
              <th style="width:5%;"></th>
              <th style="width:8%;"></th>
            </tr>
          </thead>
            <tbody>
              <tr>
                <td><b>Robin</b></td>
                <td>Hier komt dan het bericht :D</td>
                <td class="text-right"><small><a href="#"><i class="fa fa-warning" style="color: #CA2B2B;"></i></a></small></td>
                <td class="text-right"><small>16 aug 18:51</small></td>
              </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

That gives me the perfect thing I want, except when it needs an overflow. Because when it needs an overflow, it just keeps going, without any overflow.

When I add display:block to the table then it does have an overflow (auto) but the table is shorter (http://prntscr.com/85c09y). That is the problem I want to be fixed, that the table looks like this: http://prntscr.com/85c1u6

I want to have overflox y to be fixed, not overflow x!

bootply.com/ittoDdbQY7 is what I have now, this is what I want: bootply.com/UVy7nJTCyl but ´with´ overflow, and it doesn't work when I don't add the ´display:block´. — Robin
– Robin, Commented Aug 16, 2015 at 18:22
@RobinR Sir, you should post a demo, preferably on fiddle.net or on your own webspace. We need at lest the CSS behind all of those classes. Inline styling is probably not the only thing influencing your table. I will give you an answer, BUT be aware, this is based solely upon the information you have provided, so it may not work when applied to your real table. — zer00ne
– zer00ne, Commented Aug 16, 2015 at 19:31
It is just standard bootstrap without any custom style. It is the latest bootstrap version so I don't know what the problem could be? I'll takd a look to your answer, however I don't know what you just did... — Robin
– Robin, Commented Aug 16, 2015 at 21:15

Robin · Accepted Answer · 2015-08-17 08:49:24Z

8

UPDATE: The red outline is the table, the blue dashed outline is the div containing the table, and the black dotted outline is the rest of the layout.

    <div class="panel-group col-sm-offset-1 col-sm-10">
  <div class="panel panel-default">
    <div class="panel-heading">

      <i class="fa fa-folder-open-o fa-fw"></i>
        <strong>Chatbox</strong> 

    </div>

    <div id="forum4" class="panel-collapse collapse in" style="height:248px;">           

      <div class="table-responsive" style="display:block;overflow:auto;max-height:248px;">

        <table class="table table-hover">
          <thead>
            <tr>
              <th style="width:5%"></th>
              <th style="width:82%;"></th>
              <th style="width:5%;"></th>
              <th style="width:8%;"></th>
            </tr>
          </thead>
            <tbody>
              <tr>
                <td><b>Robin</b></td>
                <td>Hier komt dan het bericht :D</td>
                <td class="text-right"><small><a href="#"><i class="fa fa-warning" style="color: #CA2B2B;"></i></a></small></td>
                <td class="text-right"><small>16 aug 18:51</small></td>
              </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Fix is the code above.

The style="display:block;overflow:auto;max-height:248px;" needed to be standing in the table-responsive class, not the table table-hover class

edited Aug 17, 2015 at 8:49

Robin

1,5863 gold badges26 silver badges80 bronze badges

answered Aug 16, 2015 at 19:33

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Robin Over a year ago

I want to have overflox y to be fixed, not overflow x

zer00ne Over a year ago

The only clue you gave me (since you won't post a demo), was 2 pics. One pic was of a chat box that extended further horizontally than the other chat box in the second picture. That is overflow-x, you should be more specific than just to say overflow. I can't help you until you have provided a demo. I spent some time preparing a demo you should've made yourself. I even got down voted, that's just lame.

Robin Over a year ago

There are 2 demo's. You can't just say that there aren't demo's. You don't have 1, but 2! Everything I use is just the latest version of bootstrap, I didn't make any changes to the 'core' files of bootstrap. The width needs to be fixed from the table but also the overflow (Y).

zer00ne Over a year ago

My bad, didn't see them there

Collectives™ on Stack Overflow

HTML and CSS table overflow not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related