Table Borders

  • Resolved IMTanuki

    (@imtanuki)


    8 years, 5 months ago

    Hi

    Trying to create a border around a table (no internal cell borders). I think I’m close, but can’t seem to gt the right side border to work…

    .tablepress thead th:first-of-type
	{
	border-left: 1px solid #9476c9;
	border-top: 1px solid #9476c9;
	}

.tablepress thead th:last-of-type
	{
	border-right: 1px solid #9476c9;
	border-top: 1px solid #9476c9;
	}

.tablepress tbody tr
	{
	border-collapse: collapse;
	border: 1px solid #9476c9;  /* NOT SURE THIS IS CORRECT OR SUFFICIENT
	}

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    Has anyone tried to do this?

    Thanks!

    • This topic was modified 8 years, 5 months ago by bdbrown.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 5 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter IMTanuki

    (@imtanuki)

    8 years, 5 months ago

    Tobias,

    Thanks for the quick reply.

    Try url: http://dev03.altchinese.com/

    I may make some changes, but in general, I think my syntax for the right side of the table may be off:

    – the table header is fine (but that is a single row)
    – not sure if there is a special css reference to ALL rows in the table body…?

    Regards!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 5 months ago

    Hi,

    thanks for the link!

    Now, from what I understand, you just want a border around the table. Why don’t you just use

    .tablepress {
  border: 1px solid #9476c9;
}

    then? That should be the shortest version.

    Regards,
    Tobias

    Thread Starter IMTanuki

    (@imtanuki)

    8 years, 5 months ago

    Nope.

    I’m using Visual Composer and I thought there might be a conflict with tablepress and columns or custom boxes, so I put it in a single row…still no right border…:>(

    Thread Starter IMTanuki

    (@imtanuki)

    8 years, 5 months ago

    with

    .tablepress {
    border: 1px solid #9476c9 !Important;
    }

    I get the top, left, bottom borders. But not the right.

    a) Do you know of any conflict with Visual Composer?
    b) Do you know of any explicit CSS for the right side of the table, including header and data rows?

    Thanks!

    Thread Starter IMTanuki

    (@imtanuki)

    8 years, 5 months ago

    And…with the single border command, the bottom border does not display.

    I’m pullin my hair out…

    Thread Starter IMTanuki

    (@imtanuki)

    8 years, 5 months ago

    FWIW, here’s what finally worked:

    for desktops:

    border-top: 1px solid #b3b3b3 !Important;
    border-bottom: 1px solid #b3b3b3 !Important;
    border-left: 1px solid #b3b3b3 !Important;
    border-right: 2px solid #b3b3b3 !Important;

    for mobile:

    border-top: 1px solid #b3b3b3 !Important;
    border-bottom: 4px solid #b3b3b3 !Important;
    border-left: 1px solid #b3b3b3 !Important;
    border-right: 2px solid #b3b3b3 !Important;

    Not sure what the problem is…

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 5 months ago

    Hi,

    that’s indeed a bit strange… Your theme’s CSS code be interfering, I guess.
    Good to hear that you were able to make it work 🙂

    Best wishes,
    Tobias

Viewing 8 replies - 1 through 8 (of 8 total)

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