BubbaLovesWP

GOT IT !!

I had to remove the padding and define the row height for the body and header of both tables. (or I think I did) ??

This is the CCS if anyone is interested.

.table-wrapper {
	margin: 0 auto;
	width: 600px;
}

#tablepress-1_wrapper {
	width: 33%;
	float: left;
	margin-left: 40px;
}

#tablepress-1_filter {
	display: none;
}

.tablepress-id-1 .column-1 {
	text-align: center;
}

.tablepress-id-1 tr {
	height: 37px;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
	border: 1px solid #333333;
}

.tablepress-id-1 thead th,
.tablepress-id-2 thead th {
	text-align: center;
	height: 30px;
}

.tablepress-id-2 {
	width: 55%;
}

/* each line is 37px in height */
.tablepress-id-2 .row-2 {
	height: 370px;
}

.tablepress-id-2 .row-3 {
	height: 1110px;
}

.tablepress-id-2 .row-4 {
	height: 1110px;
}

.tablepress-id-2 .row-5 {
	height: 1110px;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
	border: 1px solid #333333;
}

.tablepress-id-2 thead th:first-child,
.tablepress-id-2 tbody td:first-child {
	border-left: none;
}

Thanks Tobias!

Thanks, I’ll experiment with that and get back to you. Thanks again!

Haha. We posted at the same time ??

What I wanted to ask was ->

The Tables look perfect in Google Chrome, but they are all Misaligned in Firefox.

In Firefox, the second table is not the same height as the first table, and tiers do not match.

How do they look to you? And is there a way to make then universally aligned across all browsers and screens?

Thanks.

UPDATE:

Hi Tobias. My Tables look great in Google Chrome, but they are all Misaligned in Firefox!

How do they look to you? And is there a way to make then universally aligned across all browsers and screens?

Thanks.

Hi Tobias,

It looks like I got everything to work. But I did some trial and error to make it look good. First off, in order to get both tables centered on the page, I added a margin to the wrapper ->

#tablepress-1_wrapper {
	width: 35%;
	float: left;
	margin-left: 40px;

And then I did a bunch of other spacing things.

Can you please tell me if this CSS code is okay, or if it is too sloppy and should be cleaned up a bit. Thanks!

.table-wrapper {
	margin: 0 auto;
	width: 600px;
}

#tablepress-1_wrapper {
	width: 35%;
	float: left;
	margin-left: 40px;
}

#tablepress-1_filter {
	display: none;
}

.tablepress-id-1 .column-1 {
	text-align: center;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
	border: 1px solid #333333;
	padding: 10px;
}

.tablepress-id-1 thead th,
.tablepress-id-2 thead th {
	text-align: center;
}

.tablepress-id-2 {
	width: 50%;
}

/* each line is 37px in height */
.tablepress-id-2 .row-2 {
	height: 111px;
}

.tablepress-id-2 .row-3 {
	height: 629px;
}

.tablepress-id-2 .row-4 {
	height: 1480px;
}

.tablepress-id-2 .row-5 {
	height: 1480px;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
	border: 1px solid #333333;
	padding: 10px;
}

.tablepress-id-2 thead th:first-child,
.tablepress-id-2 tbody td:first-child {
	border-left: none;
}

CURRENT TABLE VIEW

So I changed the CSS to this ->

.table-wrapper {
	margin: 0 auto;
	width: 600px;
}

#tablepress-1_wrapper {
	width: 35%;
	float: left;
}

#tablepress-1_filter {
	display: none;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

.tablepress-id-2 {
	width: 50%;
}

.tablepress-id-2 .row-2 {
	height: 120px;
}

.tablepress-id-2 .row-3 {
	height: 640px;
}

.tablepress-id-2 .row-4 {
	height: 1560px;
}

.tablepress-id-2 .row-5 {
	height: 1560px;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

.tablepress-id-2 thead th:first-child,
.tablepress-id-2 tbody td:first-child {
	border-left: none;
}

And it look good.

All I need to do it get rid of the “Show 100 entries” (to align the 2 tables) And I need to center both tables, then I think we’re done!

Thanks ??

I will play around with the rowheight in order to get it perfect, but that should be easy

Hi,

I did not use

#tablepress-1_filter {
  display: none;
}

because I did not know where to place it.

I adjusted the CSS width and percentages to make it look better.

.table-wrapper {
	margin: 0 auto;
	width: 600px;
}

#tablepress-1_wrapper {
	width: 35%;
	float: left;
}

#tablepress-1_filter {
	display: none;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

.tablepress-id-2 {
	width: 50%;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

.tablepress-id-2 thead th:first-child,
.tablepress-id-2 tbody td:first-child {
	border-left: none;
}

And I decided it would be easier to have 4 rows in table_2, and the fix the height of each row, rather than have 100 rows and use #rowspan#.

CURRENT TABLE APPEARANCE

My Shortcose also looks like this

<div class="table-wrapper">

[table id=1 datatables_counter_column="true" /]

[table id=2 /]

</div>

Thanks!

Hi,

The row numbers disappear when I disable “Enable the visitor to filter or search the table.“

Currently it is enabled.

Changes with Search/Filtering Enabled

Thanks!

<?php
/**
* @package WordPress
* @subpackage OnPaper_Theme
*/
global $mc_layout;
?>

</div>
<div id=”footer”>
<!– <div class=”inside”>
<?php //wp_footer(); ?>
Copyright © <?php echo date(‘Y’);?> <?php bloginfo(‘name’); ?>. All rights reserved.
</div>–>
</div>

</div>

</div> <!– /InnerContents–>
</div> <!– /ContentBody–>

<div id=”ContentFooter”>
<?php print $mc_layout[“Footer”] ?>
</div>

</div> <!– /ContentSection–>
</body>
</html>

No “Use DataTables” is not enabled for either Table

Hi Tobias,

1) I definitely need help with the CSS. That’s where things are a mess.

2) I have the latest version of both TablePress and the Extension.

This is what my CSS looks like ->

‘.tablepress-id-1,
.tablepress-id-2 {
width: 33%;
float: center;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
border: 1px solid #333333;
}

.tablepress-id-1 tbody td,
.tablepress-id-1 thead th {
}

.tablepress-id-1 .column-1 {
padding: 14px;
}

.tablepress-id-1 .column-2 {
padding: 14px;
}

.tablepress-id-1 .column-3 {
padding: 14px;
}

.tablepress-id-1 .column-4 {
padding: 14px;
}

.tablepress-id-1 {
width: auto;
margin: 0 auto 1em;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
border: 1px solid #333333;
}

.tablepress-id-2 .column-1 {
padding: 14px;
}

.tablepress-id-2 .column-2 {
padding: 14px;
}

.tablepress-id-2 {
width: auto;
margin: 0 auto 1em;
}’

And this is what my HTML looks like

‘[table id=1 datatables_counter_column=”true” /][table id=2 /]’

And this is what my page looks like ->

Blog Test

Hi,

Thanks for your response.

1) I attempted doing this with 2 tables side by side, but one issue I had was getting the rows to line up in both tables identical. (So it looks good). Maybe you have an idea for that…

2) The reason I want Column 3 hidden is because the table lists people who donated money, and I want to keep the amount of money hidden, but at the same time, I want to use the amount of money to sort the table from Highest to Lowest. Every few days I will add a name and amount to column 2 and 3 and resort the table.

3) I had already installed datatables-counter-column but the row numbers were not showing. I am running WP 4.0, but my theme is very old.

Thanks!

Hi, yes you understood correctly. [games] [scoreboard] [profile] [info] are all non-wp pages.

Only [blog] is wordpress, and hopefully [blog_2]

The reason I want a second blog is this ->
the tab [blog] is my page where I post posts on a regular basis.
the second tab [blog_2] would hopefully be a static page where I can post something and keep it there without being bumped by any new posts

I think you are correct. My best option might be to have one blog with contributions (post), assigned to CATEGORY_A, and another static page, assigned to CATEGORY_B

I ‘inherited’ this website and I don’t know any programming except how to use WP. I’m new to this whole website thing.

I guess I can have the [blog] tab link to
https://www.domain.com/blog/category/post1

and the [blog_2] tab link to
https://www.domain.com/blog/category2/post1

as long as i don’t post to category2, then the page should never change. (which is what I want)

I’ll experiment with that. Thanks!

Okay, Maybe I should add some more details….

I have a non-wp website. It is basically an old fashion html/php site that incorporates WP.

It has Tabs across the top like this ->

[games] [scoreboard] [wp blog] [profile] [info]

The Tabs correlate to different URLs,

https://www.domain.com/games/
https://www.domain.com/scoreboard/
https://www.domain.com/blog/
https://www.domain.com/profile/
https://www.domain.com/info/

I would like a new Tab at the top, with a new blog page, such that it would be ->

[games] [scoreboard] [wp blog] [profile] [info] [wp blog 2]

The Tabs correlate to different URLs,

https://www.domain.com/games/
https://www.domain.com/scoreboard/
https://www.domain.com/blog/
https://www.domain.com/profile/
https://www.domain.com/info/
https://www.domain.com/blog_2/

Is that possible with my 1 current WP installation, or do i need to do a multi-site option? I would like this to be as simple as possible.

Thanks!