Replies: 1
Hello,
I’m new to CSS and WordPress and am looking to insert a table into my webpage. I’ve tried using the CSS coding I’ve found through searching your forum support and think I’ve only managed to confuse myself more. 🙂
Basically, I’m looking to create bottom-aligned, centered vertical headings for columns 5-21. I want each column to be as narrow as possible so I can fit as many as possible on the page. I also would like to switch the text in the first column to fit vertically in the spanning space. I would also like to shrink the entire table to make it smaller. I tried changing the font size, but didn’t have much success.
You can find the table on my (very unfinished) website here: https://www.gshockcentral.com/best-g-shock-watch/
Here’s the CSS I’ve created so far:
.tablepress-id-N {
width: auto;
margin: 0 auto 1em;
}
.tablepress-id-N tbody td {
font-size: 75%;
}
.tablepress-id-2 thead 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: 160px;
text-align: center;
}
.tablepress-id-2 th,
.tablepress-id-2 td {
white-space: nowrap;
}
.tablepress-id-2 .column-2 .
tablepress-id-2 .column-3
.tablepress-id-2 .column-4 {
white-space: normal;
}
.tablepress-id-2 .column-1
.tablepress-id-2 .column-2
.tablepress-id-2 .column-3
.tablepress-id-2 .column-4
.tablepress-id-2 .column-5
.tablepress-id-2 .column-6
.tablepress-id-2 .column-7
.tablepress-id-2 .column-8
.tablepress-id-2 .column-9
.tablepress-id-2 .column-10
.tablepress-id-2 .column-11
.tablepress-id-2 .column-12
.tablepress-id-2 .column-13
.tablepress-id-2 .column-14
.tablepress-id-2 .column-15
.tablepress-id-2 .column-16
.tablepress-id-2 .column-17
.tablepress-id-2 .column-18
.tablepress-id-2 .column-19
.tablepress-id-2 .column-20
.tablepress-id-2 .column-21 {
padding: 2px;
}
.tablepress-id-2 .column-5,
.tablepress-id-2 .column-6,
.tablepress-id-2 .column-7,
.tablepress-id-2 .column-8,
.tablepress-id-2 .column-9,
.tablepress-id-2 .column-10,
.tablepress-id-2 .column-11,
.tablepress-id-2 .column-12,
.tablepress-id-2 .column-13,
.tablepress-id-2 .column-14,
.tablepress-id-2 .column-15,
.tablepress-id-2 .column-16,
.tablepress-id-2 .column-17,
.tablepress-id-2 .column-18,
.tablepress-id-2 .column-19,
.tablepress-id-2 .column-20,
.tablepress-id-2 .column-21,
{width: 5px !important;
}
Thank you so much for spending time to make a great product and offering support to those, like me, who don’t know much about CSS.
Lonica