Hi,
the problem now is that you put tablepress-roster6-table into the “Custom Commands” textfield. It should be in the “Extra CSS classes” text field only.
For the color of the header row, please see https://tablepress.org/faq/change-background-color-table-head-row/
I don’t know a good solution for the column width, unfortunately. This is a drawback of the rotated header row text.
Regards,
Tobias
Hi,
thank you for the hint.
To narrow the columns I used this command:
.tablepress-roster6-table .column-2,
.tablepress-roster6-table .column-3,
.tablepress-roster6-table .column-4,
.tablepress-roster6-table .column-5,
.tablepress-roster6-table .column-6,
.tablepress-roster6-table .column-7,
.tablepress-roster6-table .column-8,
.tablepress-roster6-table .column-9,
.tablepress-roster6-table .column-10,
.tablepress-roster6-table .column-11,
.tablepress-roster6-table .column-12,
.tablepress-roster6-table .column-13,
.tablepress-roster6-table .column-14,
.tablepress-roster6-table .column-15,
.tablepress-roster6-table .column-16,
.tablepress-roster6-table .column-17,
.tablepress-roster6-table .column-18,
.tablepress-roster6-table .column-19 {
padding: 2px;
width: 5px;
}
but the problem still persists. Can you please help me, give me whichever solution to the narrowing of columns?
Also: how can I set the “Einträge anzeigen” to maximum? Why is there 10 by default?
Thank you!
Milada
Regarding this: how can I set the “Einträge anzeigen” to maximum? Why is there 10 by default?
it´s solved.
Can you please give me hints to make the table aesthetically nice?
Also, how do I add borders to individual cells, making vertical and horizontal lines, so that “X” are more clear for the readers?
Thank you!
Milada
Hi,
To add border lines, something like
.tablepress-roster6-table tbody td {
border: 1px solid #cccccc;
}
should help.
Regarding the width: As I said, this is not really possible. Whenever a table is too wide, this is almost always going to create problems 🙁
And the rotated text makes this more difficult, as I don’t know a good way to make the columns smaller with that. Sorry!
Regards,
Tobias
this is my code:
.tablepress {
word-break: normal;
}
.tablepress-roster6-table th,
.tablepress-roster6-table td {
border: 1px solid black;
}
.tablepress-roster6-table .row-1 span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
height: 75px;
text-align: center;
vertical-align: center;
}
.tablepress thead th,
.tablepress tfoot th {
font-weight: bold;
font-size: 10px;
background-color: #12c9c4 !important;
}
.tablepress-roster6-table .column-1 td,
.tablepress-roster6-table .column-2 td,
.tablepress-roster6-table .column-3 td,
.tablepress-roster6-table .column-4 td,
.tablepress-roster6-table .column-5 td,
.tablepress-roster6-table .column-6 td,
.tablepress-roster6-table .column-7 td,
.tablepress-roster6-table .column-8 td,
.tablepress-roster6-table .column-9 td,
.tablepress-roster6-table .column-10 td,
.tablepress-roster6-table .column-11 td,
.tablepress-roster6-table .column-12 td,
.tablepress-roster6-table .column-13 td,
.tablepress-roster6-table .column-14 td,
.tablepress-roster6-table .column-15 td,
.tablepress-roster6-table .column-16 td,
.tablepress-roster6-table .column-17 td,
.tablepress-roster6-table .column-18 td,
.tablepress-roster6-table .column-19 td {
width: 5px;
padding: 2px;
}
.csstransforms & th.rotate {
height: 140px;
white-space: nowrap;
}
.tablepress-roster6-table .column-1 {
font-size: 10px;
background-color: #71f2ed !important;
}
Hi,
ok, let’s start fresh.
Please write the HTML in all column head cells like this:
<div><span>Text</span></div>
Then, use this “Custom CSS”:
.tablepress {
word-break: normal;
}
.tablepress-roster6-table th,
.tablepress-roster6-table td {
border: 1px solid black;
width: 20px;
padding: 2px;
}
.tablepress thead th,
.tablepress tfoot th {
font-weight: bold;
font-size: 10px;
background-color: #12c9c4 !important;
}
.tablepress-roster6-table .column-1 {
font-size: 10px;
background-color: #71f2ed !important;
}
.tablepress-roster6-table thead th {
height: 140px;
white-space: nowrap;
}
.tablepress-roster6-table thead th > div {
transform:
/* Magic Numbers */
translate(25px, 51px)
/* 45 is really 360 - 45 */
rotate(315deg);
width: 30px;
}
.tablepress-roster6-table thead th > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
Regards,
Tobias
P.S.: And thanks for rating TablePress and for contributing. I still not you to understand that I can not give unlimited free support.
I changed the code to:
.tablepress-roster6-table thead th > div {
transform: /* Magic Numbers */
/* 90 is really 360 - 90 */
translate(25px,51px) rotate(330deg);
width: 30px;
}
but it does not work…
NOW IT WORKS!
I changed your code as follows:
.tablepress-roster6-table thead th > div {
transform: /* Magic Numbers */
/* 90 is really 360 - 90 */
translate(25px,51px) rotate(270deg);
width: 10px;
}
My question is how to center the rotated text in the cell now?
Regards,
Milada
Hi,
you will now have to play with the numbers in translate(25px,51px).
In addition, I think you can remove
.tablepress-roster6-table thead th > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
as it’s not necessary here.
To center the text in the body cells, try
.tablepress-roster6-table tbody td {
text-align: center;
}
And you should probably turn off Sorting on the table’s “Edit” screen, to remove the arrow icons.
Regards,
Tobias
Hi,
sorry, where do you see translate(25px,51px)?
I corrected as you suggested above, and now when scrolling, the columns of the header row shifted to the right so that they do not correspond the rows underneath.
Regards,
Milada
Hi,
please look more closely. It’s in the `.tablepress-roster6-table thead th > div {
` part.
Regards,
Tobias
Hi,
thank you very much!!!! Now, it is wonderful!
There is just one more little thing that spoils the perfection:
now when scrolling, the columns of the header row shifted to the right so that they do not correspond the rows underneath…
please have a look here http://moreyouthfulskin.com/cs/smoothie-silnejsi-krasnejsi-nehty/ and scroll down
How to remedy on this one?
Regards,
Milada
Hi,
I don’t know a solution to that, sorry 🙁
Maybe you can try vertical scrolling instead, by replacing datatables_fixedheader=true with datatables_scrolly="300px"
Regards,
Tobias
