CODEWITHSUNDEEP
htmlcss
JustLooking
JustLooking

Reputation: 2486

How to make a fixed table which allows you to handle overflow and vertical alignment

Forgive me if I went a little nutty with the heights and widths (I was just randomly trying stuff).

  1. Check this out:

https://jsfiddle.net/dddrbw89/

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
    <table style="width: 100px; height: 100px;">
        <tr style="width: 100px; height: 100px;">
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
                <div style="height: 100px; overflow:hidden">
                    just some text.
                </div>
            </td>
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;">
                <div style="height: 100px; overflow:hidden">
                    some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
                </div>
            </td>
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
                <div style="height: 100px; overflow:hidden">
                    just some text.
                </div>
        </tr>
    </table>
</body>

This is close to what I want. The table width is fixed (in this case 100), and the the table height is fixed. The text stays within the cells without overflowing. But, the text won't align at the bottom.

  1. Fine, let's remove just the div tags around each text (that's what I was using to handle overflow):

https://jsfiddle.net/9qpaLn5a/

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
    <table style="width: 100px; height: 100px;">
        <tr style="width: 100px; height: 100px;">
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
                just some text.
            </td>
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;">
                some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
            </td>
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
                just some text.
        </tr>
    </table>
</body>

Well, once I remove the div tags, the table expands to the height of the text (so no longer fixed at 100px).

The first link (#1) handles overflow, but I can't get the text aligned at the bottom of the cell.

The second link (#2) handles overflow - as in there won't be any - because it increases the height of the table.

I can't seem to get a combination of the both. Any ideas?

Thank you.

Upvotes: 0

Views: 72

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42354

This is actually entirely possible with the power of flexbox! Simply take the first of your two attempts, and apply the following to the container div:

display: flex;
align-items: flex-end;


<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
  <table style="width: 100px; height: 100px;">
    <tr style="width: 100px; height: 100px;">
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
    </tr>
  </table>
</body>

I've also created a Fiddle of this here.

If you'd like to have the central column overflow at the bottom, simply replace align-items: flex-end, with align-items: flex-start on the middle column, as such:

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
  <table style="width: 100px; height: 100px;">
    <tr style="width: 100px; height: 100px;">
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-start;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
    </tr>
  </table>
</body>

EDIT:

Keep in mind that Internet Explorer is terrible at handling tables, and will not respect your percentage-based widths. The best way to get around this is to set a pixel-based max-width equivalent to the relevant widths. This will force the browser to not expand your cells:

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
  <table style="width: 100px; height: 100px;">
    <tr style="width: 100px; height: 100px;">
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; max-width: 45px; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; max-width: 10px; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-start;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; max-width: 45px; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
    </tr>
  </table>
</body>

Also keep in mind that you should be making sure that your percentage-based totals add up to 100%, as most browsers will try to 'correct' that for you automatically ;)

EDIT 2:

You were very close with your final attempt, but missed two things: your middle column was using align-items: flex-start, when it should have been using align-items: flex-end. The second step was to add another div inside the flexbox div, which you can center with margin: 0 auto:

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
  <table style="width: 400px; height: 400px;">
    <tr style="width: 400px; height: 400px;">
      <td style="vertical-align:bottom; border-style: solid; width: 45%; max-width: 180px; height: 400px;">
        <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;">
          <div style="margin: 0 auto;">
            just some text.
          </div>
        </div>
      </td>
      <td style="vertical-align:bottom; border-style: solid; width: 10%; max-width: 40px; height: 400px;">
        <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;">
          <div style="margin:0 auto;">
            some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
          </div>
        </div>
      </td>
      <td style="vertical-align:bottom; border-style: solid; width: 45%; max-width: 180px; height: 400px;">
        <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;">
          <div style="margin: 0 auto;">
            just some text.
          </div>
        </div>
    </tr>
  </table>
</body>

I've also created this new fiddle.

Hope this helps! :)

Upvotes: 1

Related Questions