# Centering basic html left-aligned tables on mobile WITHOUT media queries

**URL:** <https://forum.freecodecamp.org/t/centering-basic-html-left-aligned-tables-on-mobile-without-media-queries/341562>\
**Category:** General\
**Created:** [January 15, 2020, 4:54pm UTC](https://forum.freecodecamp.org/t/centering-basic-html-left-aligned-tables-on-mobile-without-media-queries/341562 "2020-01-15T16:54:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![IanBallNH](https://avatars.discourse-cdn.com/v4/letter/i/ecc23a/32.png) [@IanBallNH](https://forum.freecodecamp.org/u/IanBallNH)\
**Post date:** [January 15, 2020, 4:54pm UTC](https://forum.freecodecamp.org/t/centering-basic-html-left-aligned-tables-on-mobile-without-media-queries/341562/1 "2020-01-15T16:54:10Z")

</div>

I have a very specific question/html puzzle targeted to Outlook, which strips out all media queries. I’ve been able to “mimic” responsive behavior with 3 left aligned tables that drop down upon each other on a smaller mobile display, but they are now all left aligned on a mobile display with lots of white space to the right of the 3 tables. It looks awful. I’ve tried using different padding strategies, different combinations of percentages/fixed table widths, sung em padding strategies (which seem to exaggerate the padding on the phone a bit and nudge it over a bit), cannot use float; this is one puzzle I cannot crack! With out device detection to change code, can anyone think of a straight html solution for left aligned tables, when they drop down on a mobile display, will come close to centered? My challenge, it’s driving me nuts! There has to be a solution or a workaround.

---

<div class="post-metadata">

**Author:** ![nblack4](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nblack4/32/129290_2.png) [@nblack4](https://forum.freecodecamp.org/u/nblack4)\
**Post date:** [January 16, 2020, 3:12am UTC](https://forum.freecodecamp.org/t/centering-basic-html-left-aligned-tables-on-mobile-without-media-queries/341562/2 "2020-01-16T03:12:06Z")

</div>

Maybe I’m way off base here but can you use CSS? Flexbox? Align the table based off flex rules?

---

<div class="post-metadata">

**Author:** ![IanBallNH](https://avatars.discourse-cdn.com/v4/letter/i/ecc23a/32.png) [@IanBallNH](https://forum.freecodecamp.org/u/IanBallNH)\
**Post date:** [January 16, 2020, 2:18pm UTC](https://forum.freecodecamp.org/t/centering-basic-html-left-aligned-tables-on-mobile-without-media-queries/341562/3 "2020-01-16T14:18:27Z")

</div>

Yes, I’ve tried those! Unfortunately sending through Outlook once again strips it out and does not support these fixes. It’s quite frustrating.

---

<div class="post-metadata">

**Author:** ![abequar](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/abequar/32/131898_2.png) [@abequar](https://forum.freecodecamp.org/u/abequar)\
**Post date:** [January 20, 2020, 1:31pm UTC](https://forum.freecodecamp.org/t/centering-basic-html-left-aligned-tables-on-mobile-without-media-queries/341562/4 "2020-01-20T13:31:09Z")

</div>

Hey, I’m not totally sure about what you want to do but when I want to force alignment, as a ultimate card, I usually try to use the top; bottom; left; right properties that are embraced with position: absolute;

**[I recommend this article from MDN to more details on how to use it.](https://developer.mozilla.org/en-US/docs/Web/CSS/position)**

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:37pm UTC](https://forum.freecodecamp.org/t/centering-basic-html-left-aligned-tables-on-mobile-without-media-queries/341562/5 "2021-06-01T19:37:32Z")

</div>

Closed on June 1, 2021, 7:37pm UTC


