- Hi,
I created two tables using supsystic. I wanted them to display side to side in the same line. Right now it is displaying only one after another. The code I used in my editor is:[supsystic-tables id=29] [supsystic-tables id=30]Can someone please help??
Make one table that spans the entire width of the page. Include one more column than you need - in the middle. Play with lines and borders so the middle column has none. You appear to have two tables. Way eaiser than columns. However, up until now I have not been able to get side by side tables. The trick is to do a table within a table. Step 1: Create a 2×1 table. Step 2: In the left hand side of the 2×1 table insert the table you really want. Step 3: In the right hand side of the 2×1 table insert the table you really want.
- Hi @crashok, the ticket says its solved, how could you het this to work?My site shows 3 or more tables but the responsiveness and the row highlights only work on the first one, I don’t know what to doTables will not show side by side, even if you are not using the plugin. The reason is a table is a block element.Simply said, in the document content flow of a page, a block element will have its own line, for the entire width of the page. All block elements will, therefore, be placed to the next line, by default.On any block element, give it a border, and you will see the width is for the entire page irrespective of the content within it. Even of you restrict the width of a block element to allow other things to side beside it won’t work because a block element remains a block element no matter the width.To change the default layout of a block element, use CSS to change its display to “inline-block”. This is one method.Another method, still CSS, is to use the “float: left” property and value. Another is to use the “position: absolute”, but this will require a fair bit of work using the positioning properties of “margins” or “left” or “right” and the parent element to the table, such as a DIV, must be “position: relative” to contain the absolute positioned table.The best way I found to align tables side by side is to do custom HTML & CSS, create a container element DIV that wraps all tables and use the properties of the flex-box. Then each table is wrapped in its own DIV element and give each individual DIV a fixed width.Remember, these side by side tables are not responsive and will only work for desktop screens and some table screens depending on screen size. It is better to use the flex-box method I described for the tables generated by the plugin, this way the plugin will handle the responsiveness of the table.Hope that helps.
- This reply was modified 10 months, 2 weeks ago by wpwd2016.
- This reply was modified 10 months, 2 weeks ago by wpwd2016.
- This reply was modified 10 months, 2 weeks ago by wpwd2016.
![Word Two Tables Side By Side Word Two Tables Side By Side](http://theapptimes.com/wp-content/uploads/2011/01/drag-the-tables.png?c49e29&9823c2&7090cb)
- The topic ‘Two tables side by side’ is closed to new replies.