CODEWITHSUNDEEP
htmlcssoverflow
Sibay
Sibay

Reputation: 117

Table's overflow-x inside fieldset

Here is two samples:

<div class="content-wrapper">
    <div class="gridwrapper">
        <table>
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

http://jsfiddle.net/8wzLzf09/1/

Overflow-x works correctly when table's parent div inside another div

<div class="content-wrapper">
    <fieldset>
        <legend></legend>
        <div class="gridwrapper">
            <table>
                <thead>
                    <tr>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>     
                    </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
</div>

http://jsfiddle.net/8wzLzf09/2/

Overflow-x doesn't work correctly when table's parent div inside fieldset, it allows to expand table's width

What the reason of it? Anyone have idea how to fix it?

I need 100% width of fieldset and gridwrapper, size must be based only on main content-wrapper

Thanks

Upvotes: 1

Views: 1512

Answers (3)

Marc Audet
Marc Audet

Reputation: 46795

Here is one way of doing it. Apply display: inline-block to fieldset and .gridwrapper, and display: table to .content-wrapper. This will force the content to compute a shrink-to-fit width. You need to set a max-width value to .gridwrapper and make an adjustment for the padding and border width from the fieldset element.

This layout will shrink in width responsively if the table is narrow enough.

.content-wrapper {
  min-width: 200px;
  max-width: 400px;
  margin: 0 auto;
  border: 1px dashed red;
  display: table;
}
fieldset {
  display: inline-block;
}
.gridwrapper {
  border: 1px solid black;
  overflow-x: auto;
  max-width: 372px; /* you need to adjust 400px for padding and border width of fieldset */
  display: inline-block;
}
table {
  width: auto;
}
<div class="content-wrapper">
  <fieldset>
    <legend>Fieldset legend</legend>
    <div class="gridwrapper">
      <table>
        <thead>
          <tr>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
          </tr>
        </tbody>
      </table>
    </div>
  </fieldset>
</div>

Upvotes: 0

robjez
robjez

Reputation: 3788

You need to min and max width on fieldset too, so this should do the job:

.gridwrapper {
    border: 1px solid black;
    overflow-x: auto;
}
.content-wrapper, fieldset {
    min-width: 200px;
    max-width: 400px;
    margin: 0 auto;
}
table {
    width: 100%;
}

Based on clarifications, here is another attempt:

.content-wrapper {
min-width: 200px;
max-width: 400px;
margin: 0 auto;
overflow-x: scroll;
}
.gridwrapper {
border: 1px solid #000;
overflow-x: auto;
max-width: 350px;
}
table {
    width: 100%;
}

Upvotes: 1

user2689712
user2689712

Reputation:

Solution 

.gridwrapper {
    border: 1px solid black;
    overflow-x: auto;
    max-width: 350px;
}
.content-wrapper {
    min-width: 200px;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid red;
}
table {
    max-width: 350px;
}

Upvotes: 1

Related Questions