CODEWITHSUNDEEP
css
Lai32290
Lai32290

Reputation: 8558

Table overflow in fieldset not working

I'm try put a table in fieldset, where table has a width 2200px fixed, and table parent (a div) has css property overflow-x: auto; width: 100%

Structure like this:

fieldset:
    div:
       table:

But scroll of div is not showing, how to can I fix this problem?

jsBin: http://jsbin.com/sazogamiha/edit?html,css,output

Upvotes: 0

Views: 643

Answers (2)

RiccardoC
RiccardoC

Reputation: 866

Is it possible that you're using the comma (",") instead of the semicolon (";") to separate css properties?

About widths. Some tags do not work well for your issue, and one of those is fieldset

Try this

<div class="wrapper">
    <div class="container">
      <fieldset>
        <table>
          <tr>
            <td>...</td>
          </tr>
        </table>
      </fieldset>
    </div>
</div>

And this CSS

div.wrapper {
  width: 100%;
}
div.container {
  overflow-x: auto; 
  width: 90%;
}
table {
  width: 2000px;
}
table td {
  border: 1px solid black;
}

Upvotes: 1

Alex
Alex

Reputation: 8695

You can use width: 100vw; instead of width: 100%;.

Jsbin

#pai {
    width: 100vw;
    overflow-x: auto;
    float: left;
    white-space: nowrap;
}

Or you have to give min-width: 0; to fieldset. fieldset has min-width: -webkit-min-content; by default so you override that.

fieldset {
    width: 100%;
    min-width: 0;
}

Jsbin

Upvotes: 1

Related Questions