Right now my tables are aligned side by side, using nested tables. But the problem with that is I don't want to have to scroll horizontally to see all the tables. How do I make the tables aligned side by side without nested tables?
Right now my tables are aligned side by side, using nested tables. But the problem with that is I don't want to have to scroll horizontally to see all the tables. How do I make the tables aligned side by side without nested tables?
There are 2 ways: inline tables and floated tables. BTW, neither one of them works in Wikia's mobile.
{| class="wikitable" style="display: inline-table;" | This is table #1 |} {| class="wikitable" style="display: inline-table;" | This is table #2 |} {| class="wikitable" style="display: inline-table;" | This is table #3 |} {| class="wikitable" style="display: inline-table;" | This is table #4 |} {| class="wikitable" style="display: inline-table;" | This is table #5 |}
This is table #1 |
This is table #2 |
This is table #3 |
This is table #4 |
This is table #5 |
{| class="wikitable" style="float: left;" | This is table #1 |} {| class="wikitable" style="float: left;" | This is table #2 |} {| class="wikitable" style="float: left;" | This is table #3 |} {| class="wikitable" style="float: left;" | This is table #4 |} {| class="wikitable" style="float: left;" | This is table #5 |}
This is table #1 |
This is table #2 |
This is table #3 |
This is table #4 |
This is table #5 |
Thanks!
This is what I've been trying to do for hours! Thank you! I do have another question: is there a way to increase the space between the tables in the first option (style="display: inline-table;")?
You can use CSS margins. However, if you increase the margins and/or table widths too much, they will wrap to the next line. For example,
{| class="wikitable" style="display: inline-table; margin-right: 50px;" | This is table #1 |} {| class="wikitable" style="display: inline-table; margin-left: 50px; margin-right: 50px;" | This is table #2 |} {| class="wikitable" style="display: inline-table; margin-left: 50px; margin-right: 50px;" | This is table #3 |} {| class="wikitable" style="display: inline-table; margin-left: 50px; margin-right: 50px;" | This is table #4 |} {| class="wikitable" style="display: inline-table; margin-left: 50px;" | This is table #5 |}
This is table #1 |
This is table #2 |
This is table #3 |
This is table #4 |
This is table #5 |