CSS Question – Table Borders

  • Resolved Sevenhelmets

    (@sevenhelmets)


    12 years, 2 months ago

    Hi there

    I’ve tried to search the help for this, but haven’t been able to find an answer to this.

    I would like to exclude borders for particular cells, rows or columns in a given table. For other cells/rows/columns, I’d like the border to remain.

    I have already added 

    .tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: 1px solid black;
}

    to the “Custom CSS” field, but I’m not sure what I should put in the respective table’s “Extra CSS Classes” field to indicate which cell(s) or row(s) or column(s) to exclude the border.

    The site/page in question can be viewed here: http://iyescorp.com/cost/

    Any help would be much appreciated! Thanks!

    https://ww.wp.xz.cn/plugins/tablepress/

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 2 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    The “Extra CSS classes” field is not relevant for this, as it only allows adding CSS classes to tables, but not to cells.

    Instead, you will need to use the approach outlined in the TablePress FAQ entry at http://tablepress.org/faq/highlight-cells-or-content/
    Instead of changing the background color, as in that example, you’ll want to change the border-left, border-right, border-top, and border-bottom CSS properties as necessary.

    Regards,
    Tobias

    Thread Starter Sevenhelmets

    (@sevenhelmets)

    12 years, 2 months ago

    Wow, what a speedy response – thanks!

    Now I have a bit of a problem.

    I actually want the border on the other tables on the site, so in my custom CSS I’ve written:

    .tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: 1px solid black;
}

    This over-rides the minor changes you suggest above.

    Is there a way to make sure the ‘minor’ changes (ie no border on particular cells and rows) overrides the primary code?

    Or do I have to specify border code for each and every table on the site?

    I guess the final question is, if I want to specify no border for an entire row or entire column, how do I do that?

    Sorry for all the questions! I really appreciate the help!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 2 months ago

    Hi,

    just keep that CSS and put the CSS that changes/removes the borders from individual cells below it.
    Then, depending on whether you want to remove the border only in certain tables, either use the CSS selector .tablepress-id-123 (where 123 is the table ID), or use .tablepress to make that piece of code affect all tables.

    With that, it should actually be enough to use

    .tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: 1px solid black;
}

    to add a border to all cells.

    To remove the border for an entire row, you’d then have to remove all left and right borders from the cells, like

    .tablepress-id-123 .row-4 td {
  border-left: none;
  border-right: none;
}

    For columns, it would be the bottom and top border, like

    .tablepress-id-123 .column-4 {
  border-top: none;
  border-bottom: none;
}

    (Note that there’s no td at the end of the selector for the columns.)

    Regards,
    Tobias

    Thread Starter Sevenhelmets

    (@sevenhelmets)

    12 years, 2 months ago

    Awesome, thanks for all your help Tobias!

    For anyone reading this in the future, I wanted to remove the external border lines as well, so my final code at the start (before all the code for removing borders on particular rows/columns etc) is:

    .tablepress {
	width: auto;
	margin: 1px;
}

.tablepress tbody td {
	border: 1px solid black;
}

    Issue solved – please close the topic!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 2 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    swordio

    (@swordio)

    12 years, 2 months ago

    Hi Tobias,
    I’ve actually gone through all the steps mentioned above, but to no avail. Here’s the page in question.

    http://ashevillerealestateteam.com/about-us/scott-russell/

    The table is at the bottom of the page and has 3 graphics in it. Just wanting to remove the border. I wonder if I have ‘Super-Strong’ CSS?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 2 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    It’s not “super strong” CSS, but for some reason, your theme has an almost complete copy of the TablePress Default CSS in its “style.css” file, with slightly modified CSS selectors that results in the higher “aggressiveness”.
    The easiest fix should therefore be to simply remove that entire block from the style.css (it starts with a comment for “WP Table”). That should remove possible points of interference and should make sure that the “Custom CSS” changes take effect.
    Another solution would be to change the priority of the CSS that removes the border, by appending !important after the CSS property value, like

    border: none !important;

    Regards,
    Tobias

    swordio

    (@swordio)

    12 years, 2 months ago

    Thanks, Tobias. Actually, I meant to say I tried all the steps here:

    http://tablepress.org/faq/remove-borders-from-a-table/

    Anyway, I just tried the change of priority option as you mentioned above…no luck. I’ll try removing the block of code you mentioned. Thanks,
    Scott

    swordio

    (@swordio)

    12 years, 2 months ago

    Yep…that worked. Thanks!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 2 months ago

    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!

    mickwaldrip

    (@mickwaldrip)

    11 years, 11 months ago

    Hi Tobias,

    Iʻm having a similar problem removing the outer border of a table here: http://www.fualeo.com/countries-languages/. Iʻve gone through every thread I can find on this, and tried each of the css suggestions. Here is the css I have in there now. Can you help?

    .tablepress-id-1 tr,
.tablepress-id-1 td {
    border: none !important;
    padding: 0 !important;
}

    Thanks,

    Aaron

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years, 11 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Your theme is adding that border in a weird way, so that you’ll need to use this “Custom CSS”:

    .tablepress tbody,
.tablepress td {
    border: none !important;
    padding: 0 !important;
}

    Regards,
    Tobias

    mickwaldrip

    (@mickwaldrip)

    11 years, 11 months ago

    Thanks so much for the reply! I added that, and itʻs better, but now thereʻs a very thin white border. http://www.fualeo.com/our-partners/ it looks like some sort of margin or padding, but both of those are set to 0. So Iʻm not sure what to do.

    Thanks again for your help. Youʻre the most responsive developer Iʻve seen on here.

    Aloha,

    Aaron

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years, 11 months ago

    Hi Aaron,

    good to hear that this helped already! There’s indeed a very thin white line below the table, and that seems to be a box shadow. To remove that, please also add

    .tablepress {
  box-shadow: none;
}

    Regards,
    Tobias

    mickwaldrip

    (@mickwaldrip)

    11 years, 11 months ago

    Youʻre a lifesaver man. Thanks. Just rated you 5 stars.

    Aaron

Viewing 15 replies - 1 through 15 (of 16 total)
1 2

The topic ‘CSS Question – Table Borders’ is closed to new replies.