Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Make A Fixed Table Which Allows You To Handle Overflow And Vertical Alignment

Post a Comment
Forgive me if I went a little nutty with the heights and widths (I was just randomly trying stuff). Check this out: https://jsfiddle.net/dddrbw89/ Copy 

<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! :)


You may like these posts

Post a Comment for "How To Make A Fixed Table Which Allows You To Handle Overflow And Vertical Alignment"