Hi,
thanks for your post, and sorry for the trouble.
TablePress does indeed a default styling to its tables, to make sure that the extra elements that it adds for features like sorting, filtering, pagination, etc. work properly.
That CSS can however be altered easily with some “Custom CSS” on the “Plugin Options” screen of TablePress. My suggestion here would be to take a look at the styling examples in the TablePress FAQ at https://tablepress.org/faq/ and use those to adjust the styling to your liking.
Regards,
Tobias
Thread Starter
kams01
(@kams01)
so i am using this following example to reverse it and add borders to each cell:
.tablepress-id-N,
.tablepress-id-N tr,
.tablepress-id-N tbody td,
.tablepress-id-N thead th,
.tablepress-id-N tfoot th {
border: 1;
}
i did make sure the N is the proper table ID, but nothing changes.
Hi,
border: 1;
will not work, you will need to set the actual style of the border, e.g.
border: 1px solid #cccccc;
(i.e. thickness, line style, and color).
It should then actually be enough to use
.tablepress-id-N td,
.tablepress-id-N th {
border: 1px solid #cccccc;
}
Regards,
Tobias
Thread Starter
kams01
(@kams01)
ok so this is what I have done so far:
.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: 1px solid #dddddd;
background-color: #f1f1f1;
width: 100px;
}
however 2 issues.
One I need to change e.g. table 6 where the width is either auto or 300px, but the rest can use the same code above, how do i make sure i can have separate code for table 6? tablepress-id-6 isnt working
also, when implementing this or any similar code, it the borders dont show up correctly in firefox.
check http://icktest1.ickansas.org/monthlyiqama/ for example
Hi,
please also try adding this to solve the Firefox problem:
.tablepress {
border-collapse: separate;
}
For the table 6, you can simply add the other code below the on that you have. In general, the order should be from “general” to “specific”.
Regards,
Tobias
Thread Starter
kams01
(@kams01)
Thanks! that code fixed the firefox problem but still having the issue with specifying different code for different tables. Here is the code I have:
.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: 1px solid #dddddd;
background-color: #f1f1f1;
border-collapse: separate;
width: 100px;
}
.tablepress-id-2,
.tablepress-id-2 tr,
.tablepress-id-2 tbody td,
.tablepress-id-2 thead th,
.tablepress-id-2 tfoot th {
border: 1px solid #000000;
background-color: #f1f1f1;
border-collapse: separate;
}
table id 2 (sorry earlier example I used id 6 but shouldnt matter) is not removing the width code. i guess that is the issue, when you set something up for all tables, you then have to remove it. How do I make the width, or any other attribute default for table 2?
Hi,
you can not remove the width code like. Table 2 still inherts the value of 100px from the general code. You will have to override it, e.g. with the value
width: auto;
Regards,
Tobias
Thread Starter
kams01
(@kams01)
That is what I had thought, couldnt figure out the “auto” part
finally, auto makes the table really squeezed. Table 2 has 2 columns, so in the same code, how can i assign both columns different widths?
Hi,
your code will basically need a restructuring. You are merging commands on the table element itself, its rows, and its columns.
In summary, as a replacement of what you have above, this should be better:
.tablepress {
border-collapse: separate;
width: 100px;
}
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: 1px solid #dddddd;
background-color: #f1f1f1;
}
.tablepress-id-2 {
width: auto;
}
.tablepress-id-2 tbody td,
.tablepress-id-2 thead th,
.tablepress-id-2 tfoot th {
border: 1px solid #000000;
background-color: #f1f1f1;
width: 120px;
}
Regards,
Tobias
Thread Starter
kams01
(@kams01)
This makes more sense now…
also, was about to ask you before but you responded quite fast.
adding
border-collapse: separate
made the table borders across both browsers thicker than 1px see icktest1.ickansas.org
the left one is just simple HTML code using the theme’s CSS while your CSS code update now has the middle rows thicker than 1px. any reason why?
Hi,
ah, sorry for missing that. In fact, that line should not be necessary anymore, so please try again after removing it.
Regards,
Tobias
Thread Starter
kams01
(@kams01)
Thanks
I did remove it and it went back to its old firefox ways where the cells dont have borders
🙁
icktest1.ickansas.org
Hi,
I think I might have found the cause for this.
Please remove that border-collapse: separate; and instead extend the block
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: 1px solid #dddddd;
background-color: #f1f1f1;
}
to
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: 1px solid #dddddd;
background-color: #f1f1f1;
position: inherit;
}
Regards,
Tobias
Thread Starter
kams01
(@kams01)
Perfect! this solves that problem.
back to the width question, so I made the changes you requested and put this also on the bottom:
.tablepress-id-1 {
width: 150px;
}
which should fix all column widths to 150 px, however, where i have the largest table, it still makes all the column width auto… which then assign different values to each column as needed by the column ranging from 100px to 170px. anyway to make all of them equal width? its possible the theme is forcing something on the table but wasnt sure if there was something i could do to force it. HEre is the current code after reorganizing based on your suggestions:
.tablepress,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
border: 1px solid #dddddd;
background-color: #f1f1f1;
position: inherit;
text-align: center;
}
.tablepress-id-1 {
width: 150px;
}
Hi,
the code
.tablepress-id-1 {
width: 150px;
}
is setting the width for the overall table, not the individual columns. For that, you’ll need the CSS from https://tablepress.org/faq/column-widths/
Regards,
Tobias
