Change width of rows within a table and set two tables side by side; merge rows

Hi,

thanks for your post, and sorry for the trouble.

Merging the two cells in the top row is possible via the colspan button below the table input fields.

To show the two tables side-by-side, you could add CSS code that would position them next to each other on normal/large screens, but underneath each other on small screens. For that, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media (min-width:900px) {
 .tablepress-id-123,
 .tablepress-id-456 {
    width: 50%;
    float: left;
 }
}

(Just adjust the table IDs as necessary.)

Regards,
Tobias

Thank you, that solved my first two issues. What I am having a problem with right now is how to set the width of the individual columns. Currently the span across the whole width of the page and I would like to contain them to basically the width of the two columns with the first column set to a narrower width than the second column. I did follow the information below and tried to adjust the padding and/or table width unsuccessfully as I wasn’t sure how to adjust the settings so I end up with a table that only is as wide as the information in the table itself. Difficult to explain, but I hope you understand.

.tablepress-id-N .column-2 {
width: 100px;
}
The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector, if you want this to apply to all tables).
This is the general pattern I recommend. You can use this as often as needed, changing the column in question to the correct number each time.
Note: In most cases, it is not necessary to set the column widths directly! Instead, you will want to reduce the padding (the white space between the text in a cell and the edges of a cell), with the CSS code
.tablepress-id-N .column-2 {
padding: 4px;
}
which again needs to be adjusted as above.

Thanks very much.

I just added the code with the correct table numbers and the tables are not side by side as suggested. The url for the page ishttps://www.qbfhs.ca/unlocking-the-past-conference-2018-schedule/ and the code used is

@media (min-width:900px) {
.tablepress-id-56,
.tablepress-id-57 {
width: 50%;
float: left;
}
}

Thank you for your assistance with this.

Hi Kathy,

please try this modified version:

@media ( min-width:900px ) {
    .tablepress-id-56 {
        width: 49% !important;
        float: left;
    }
    .tablepress-id-57{
        width: 49%! important;
        float: right;
    }
    .tablepress-id-56 .column-1,
    .tablepress-id-57 .column-1 {
        width: 100px;
    }
}

Regards,
Tobias

Thank you very much, Tobias. That worked.

New problem, Tobias. I added a second set of two tables to the same page with a row of text between the two sets of tables. The text that should be between the bottom two tables is in the middle of the top two tables and the table on the right of the bottom two tables is not visible at all.

https://www.qbfhs.ca/unlocking-the-past-conference-2018-schedule/

Thank you.

Problem fixed with second table on second section fixed. Both tables are now visible but the text below tables 1 and 2 is between the two tables and the text below tables 2 and 3 is between these two tables. Thank you again for your assistance.

Hi Kathy,

to fix this, please add this piece of HTML code just above that text:

<br style="clear:both: />

Regards,
Tobias

I added that coding just above the text and it did not change anything. The text still is between the two tables.

Hi,

ah, my bad, I had a typo above… It should have been

<br style="clear:both" />

Regards,
Tobias

Thank you and it is frustrating when one keystroke can make a huge difference. I should have caught the ” myself. All well now and thanks very much.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

I have one more appearance question. Is there any way to have the tables align evenly along the top when there are two side-by-side tables? One table has one more row than the other, which throws off the top alignment. Thank you again.

Hi,

I’m not sure why this happens, but to fix it, please also add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress + br {
	display: none;
}

Regards,
Tobias

Hello and I am still having an ongoing problem with the rows side by side not working properly. For some unknown reason they have defaulted to a complete mess.

The url for the page where I am having the problem is https://www.qbfhs.ca/workshops/unlocking-the-past-2018-conference/unlocking-the-past-conference-2018-schedule/

The first two rows of tables have text inserted in the middle rather than below and the second row of tables has defaulted to the right side only.

The plug-in options for the four tables is below and I don’t see where it has changed or where it went wrong.

.tablepress-id-56 {
width: 49% !important;
float: left;
}

.tablepress-id-57 {
width: 49% !important;
float: right;
}

.tablepress-id-56 .column-1,
.tablepress-id-57 .column-1 {
width: 100px;
}

}

@media ( min-width:900px ) {

.tablepress-id-58 {
width: 49% !important;
float: left;
}

.tablepress-id-59 {
width: 49% !important;
float: right;
}

.tablepress-id-58 .column-1,
.tablepress-id-59 .column-1 {
width: 100px;
}

}

}

@media ( min-width:900px ) {