Center table with search activated

Hi,

thanks for your post, and sorry for the trouble.

Is the “Horizontal Scrolling” checkbox also checked? This can sometimes cause a problem like that.

Regards,
Tobias

Hi, thanks for your answer. No, the only databases options activated are:

Enable sorting of the table by the visitor.
Enable the visitor to filter or search the table.

Sorry for my english.

Hi,

it’s strange that the table is left-aligned then…
Could you maybe post a screenshot? Maybe I can then suggest a CSS solution.

Regards,
Tobias

Hi Tobias. I discovered tha just checking: ′′Use the following features of the DataTables JavaScript library with this table: ′′ makes the table go left. There are other tables on my site that doesnt go left after i activate the search options.

look: photo

Thanks again Tobias.

Hi,

please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.dataTables_wrapper .tablepress {
  width: 100% !important;
}

Regards,
Tobias

Hi Tobias, i added the custom css, and now the table is full width, the problem is that it has too much empy space because of the lack of content for filling it. Is there a way to center it without making it full width?

Hi,

ok, with this, we can now set the width of the container and center it. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

#tablepress-123_wrapper {
  width: 400px;
  margin: 0 auto;
}

Please change the 123 to the correct table ID and the 400px to the desired width.

Viele Grü?e,
Tobias

Hi tobias, the table is centered and i can set the width perfectly, sadly, the search box is unaligned in relation to the table. If there is no way to align it I can keep using with your last advice. You are very helpful and I can′t thank you more.

Hi,

that’s weird… This code should actually also move the Search field to the left (to keep its right edge aligned with the right edge of the table)…
Can you post another screenshot maybe? But ultimately, I would need to be able to access the page to inspect this…

Regards,
Tobias

New screenshot

Look, it is not aligned.

Also, this is al the CSS i have on the plugin;

.tablepress tbody td {
font-family: Arial;
font-size: 11px;
vertical-align: middle;
}

.tablepress thead th,
.tablepress tfoot th {
background-color: #007c36;
font-family: Arial;
font-size: 13px;
text-align: center;
color: #ffffff;
}

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

#content .tablepress {
width: auto;
margin: 0 auto 1em;
}

.tablepress td,
.tablepress th {
vertical-align: middle;
}

.tablepress .row-hover tr:hover td {
background-color: #dbdbdb;
}

#tablepress-10_wrapper {
width: 600px;
margin: 0 auto;
}

Hi,

where is the

.dataTables_wrapper .tablepress {
  width: 100% !important;
}

from above? Please add that again and remove the

#content .tablepress {
  width: auto;
  margin: 0 auto 1em;
}

Regards,
Tobias

The problem is now solved Tobias. I am inmenesly thankful.

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!