Border Radius Table
-
Hello Tobias, meanwhile I ask you thanks for the great plugin!
I unfortunately following your guides on various posts to create a rounding of the edges of the table using css to be included in the custom css! but to no avail! Could you lend a hand? thanks!
http://www.circuitovip.it/siracusa/
-
Hi,
thanks for your post, and sorry for the trouble.
Can you please try this?: https://ww.wp.xz.cn/support/topic/round-corners-tables-without-header-and-footer?replies=18#post-5736375
Regards,
TobiasHello Tobias, thanks for the reply
I inserted this code
.tablepress tbody tr:first-child td:first-child {
border-top-left-radius: 20px;
}
.tablepress tbody tr:first-child th:last-child {
border-top-right-radius: 20px;
}
.tablepress tbody tr:last-child td:first-child {
border-bottom-left-radius: 20px;
}
.tablepress tbody tr:last-child td:last-child {
border-bottom-right-radius: 20px;
}three angles are rounded except in the upper right, also the blue line you see in the link I would like to round that as well! thanks
Hi,
ah, there’s a small typo in the second block.
thneeds to betd.To have the border around the table as well, please see https://ww.wp.xz.cn/support/topic/round-table-cornes?replies=8#post-5401288 for some better CSS.
Regards,
TobiasThanks Tobias, SOLVED!
Last Question .. I am creating several tables divided into categories you can integrate a combox for recall?Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
I’m not sure what you mean with combobox for a recall here, but if you want to easily apply this CSS to more than one table without having to copy it, you could use an “Extra CSS class”. For example, replace each
.tablepressin the CSS with
.tablepress-round-cornersand then add
tablepress-round-cornersinto the “Extra CSS classes” field of each table that you want to have that round border.
Best wishes,
TobiasP.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
Thanks Tobias,
I just voted for you deserve it! As for the Combobox I found a solution, but I take advantage of a latest info if you look at the link that I added:
http://www.circuitovip.it/siracusa/
The text inside the cells is not equal for all and create some different margins! Is there any way to make them all alike! ThanksHi,
thanks for the rating, I really appreciate it!
The reason for this issue is that the browser applies different column widths. To change this, I suggest to use that “Extra CSS classes” approach from above and then set the columns widths e.g. with
.tablepress-round-corners .column-1 { width: 350px; } .tablepress-round-corners .column-2 { width: 350px; }Regards,
TobiasHello Tobias, I entered
.tablepress-round-corners .column-1 {
width: 350px;
}
.tablepress-round-corners .column-2 {
width: 350px;
}in Option Plugin Table Press but the result remains the same ..
http://www.circuitovip.it/siracusa/Please Help Me ! 😉
Hi,
the code is not working because those tables don’t have the
tablepress-round-corners“Extra CSS class” anymore. You will either have to re-add that (but then maybe use a different name), or apply the CSS to the individual selectors like.tablepress-id-1instead.Regards,
TobiasI’m sorry I did not understand what Tobias! Forgive me
Below you pointed to all the changes that I put on css option!.tablepress {
word-break: normal;
}.tablepress .odd td {
background-color: #EC7C0C;
}.tablepress tbody tr:first-child td:first-child {
border-top-left-radius: 20px;
}.tablepress tbody tr:first-child td:last-child {
border-top-right-radius: 20px;
}.tablepress tbody tr:last-child td:first-child {
border-bottom-left-radius: 20px;
}.tablepress tbody tr:last-child td:last-child {
border-bottom-right-radius: 20px;
}.tablepress {
border-collapse: separate;
}.tablepress tbody tr:first-child td {
border-top: 1px solid #4A4A4C !important;
}.tablepress tbody tr:last-child td {
border-bottom: 1px solid #4A4A4C;
}.tablepress tbody tr td:first-child {
border-left: 1px solid #4A4A4C;
}.tablepress tbody tr td:last-child {
border-right: 1px solid #4A4A4C;
}.tablepress tbody tr:first-child td:first-child {
border-top-left-radius: 10px;
}.tablepress tbody tr:first-child td:last-child {
border-top-right-radius: 10px;
}.tablepress tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}.tablepress tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}Hi,
what I mean is the concept of “Extra CSS classes” that I have explained above. I suggest that you use that to apply the consistent widths to all of those tables on that page.
Also, you seem to have the code for the round corners twice in your CSS, with different values.
Regards,
TobiasHello Tobias,
excuse the late reply but I was just fine! I solved the code that appeared 2 times! But it is not very practical on the css not know where to start for the concept of Extra CSS classes! I’m sorry but if you can give me some advice, info I would be grateful!Hello Tobias, I solved simply by putting so
.tablepress .column-1 {
width: 350px;
}.tablepress .column-2 {
width: 350px;
}
THNKSHi,
great! Remember that this will affect all tables on all pages that you have.
Best wishes,
Tobias
The topic ‘Border Radius Table’ is closed to new replies.