Two tables side by side

Hi @crashok

I got your question but didn’t fully understand it. Perhaps you can provide more detailed description with screenshots and links. And I will be happy to help you.

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 do

Tables 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 6 years, 7 months ago by mwarbinek.
• This reply was modified 6 years, 7 months ago by mwarbinek.
• This reply was modified 6 years, 7 months ago by mwarbinek.

@mwarbinek, we really appreciate your detailed explanation of this question.
There is nothing to add to your reply. Thumbs up!