centering tables

Resolved

(@brigerard)

Hello Tobias,
I have another problem with the centering tables;
The first table is correctly centered, but the following tables aligned to left on the first table, this is a problem if the width is different;
How to center each table individually.

cordially
Gerard

.dataTables_wrapper {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 380px !important;
}

.tablepress {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 600px !important;
}

.tablepress th {
	font-family: Calibri;
	font-size: 14px;
	color: #282828;
	background-color: #787878;
	text-align: center;
}

.tablepress td {
	font-family: Calibri;
	font-size: 14px;
	text-align: center;
	color: #282828;
	background-color: #D0D0D0;
}

.tablepress .even td {
	background-color: #F0F0F0;
}

.tablepress .odd td {
	background-color: #D0D0D0;
}

.tablepress .row-hover tr:hover td {
	background-color: #FFFF00 !important;
}

.tablepress .sorting {
	background-color: #787878;
}

.tablepress .column-2 {
	text-align: left;
}

.tablepress-id-9 {
	width: 350px !important;
}

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

.tablepress-id-10 {
	width: 600px !important;
}

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

http://ww.wp.xz.cn/extend/plugins/tablepress/

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 3 months ago
Hi Gerard,

you will need to change the width for the container for each each table individually.
Currently, this is setting the widths and alignment:
```
.dataTables_wrapper {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 380px !important;
}

.tablepress {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 600px !important;
}
```
First, this would apply to all tables, regardless of what width they have. And secondly, this can have weird results, as the width of the table is set to 600px, while the width of the container of the table is only 380px.
So, you should try to correct this by setting the width for each table’s container individually. Setting a width for the table should then not be necessary. So, please replace the code from above with this:
```
.dataTables_wrapper {
	margin-left: auto !important;
	margin-right: auto !important;
}
#tablepress-1_wrapper {
  width: 400px;
}
#tablepress-4_wrapper {
  width: 500px;
}
```
In this example, I set the width of table 1 to 400px, and that of table 4 to 500px. Just copy and adjust that as necessary.

Regards,
Tobias
Thread Starter brigerard
(@brigerard)

13 years, 3 months ago

Thanks
Cordially
Gérard

Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 3 months ago

Hi,

your absolutely welcome! 🙂

Best wishes,
Tobias

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘centering tables’ is closed to new replies.

Tags