CODEWITHSUNDEEP
htmlcsshtml-tableoverflow
Mauro Molinari
Mauro Molinari

Reputation: 1405

Make nested table with table-layout auto, width 100% overflow when window too small

I have a table with table-layout: auto, to which I want to give a 100% width, but I want it to overflow horizontally when the window width is below the minimum space required to fully show its contents, without it causing the window horizontal scrollbar to show, instead.

See these examples:

EXAMPLE 1 (working)

<div style="width: 100%; overflow-x: auto">
  <table style="table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
    <tr>
      <td>dcsdcsdcasd1</td>
      <td>dcsdcsdd2</td>
      <td>dcsdcsdasxascasd3</td>
      <td>dcsdcsdasd4</td>
      <td>dcsdcsdxasacasd5</td>
      <td>dcsdcsdcxasd6</td>
      <td>dcsdcsxaxasdcasd7</td>
      <td>dcsdasd8</td>
      <td>dcsdd9</td>
      <td>dcsdxaxasxascsdcasd10</td>
    </tr>
  </table>
</div>

EXAMPLE 2 (not working)

    <table>
      <tr>
        <td>
          <div style="width: 100%; overflow-x: auto">
            <table style="table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
              <tr>
                <td>dcsdcsdcasd1</td>
                <td>dcsdcsdd2</td>
                <td>dcsdcsdasxascasd3</td>
                <td>dcsdcsdasd4</td>
                <td>dcsdcsdxasacasd5</td>
                <td>dcsdcsdcxasd6</td>
                <td>dcsdcsxaxasdcasd7</td>
                <td>dcsdasd8</td>
                <td>dcsdd9</td>
                <td>dcsdxaxasxascsdcasd10</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>

When the window is resized and falls below the width required to fully show the contents, the inner table in example 2 width is kept fixed and a horizontal scrollbar is shown for the entire window. This does not happen in example 1, where the result is exactly the desired one instead. The problem lies in the wrapping table in example 2. However, in my real project, where I would need to make this work, I have that wrapping table around my HTML code and I can't remove it. Anyway, I can't understand why the wrapping table should make any difference in this regard.

Any suggestion to make this work as intended, even when the outer table is present?

Upvotes: 0

Views: 649

Answers (1)

misorude
misorude

Reputation: 3431

Your outer table in the second example still grows as much as its content demands - and that’s why you are getting a scrollbar for the whole document.

You need to limit that table in width to begin with, width: 100%; table-layout: fixed; - so that it then can overflow when the inner table inside it gets wider.

Upvotes: 1

Related Questions