Help with table

  • Resolved jesseguttenberg

    (@jesseguttenberg)


    5 years, 9 months ago

    Hi Tobias,

    Can you please help me out with the following table?

    Image: https://imgur.com/a/zqYbX5v

    Code that I used:

    .tablepress-id-15 .column-1,
.tablepress-id-15 .column-2,
.tablepress-id-15 .column-3,
.tablepress-id-15 .column-4 {
	width: 25%;
}

.tablepress-id-15 tbody td {
	text-align: center;
	vertical-align: middle;
}

.tablepress-id-15 .row-6 td {
	text-align: left;
}

.tablepress-id-15 .column-1 td {
	text-align: left;
}

.tablepress-id-15 row-1 td {
	text-align: center;
}

    In relation to the image:

    For (1): Why can’t I seem to center align the text in the header row?

    For (2): The background colour by default alternates between grey and white. Is it possible to make all non-header rows white and instead insert lines like what I showed in the table? Because some rows and columns are merged, the alternating white and grey colors look confusing.

    For (3): I can’t seem to get the text in the first column to left align. May I know why this is so?

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Please try this modified CSS to achieve what you describe:

    .tablepress-id-15 thead th,
.tablepress-id-15 tbody td {
	width: 25%;
	text-align: center;
	vertical-align: middle;
	border: 2px solid #ff0000 !important;
}

.tablepress-id-15 .row-6 td,
.tablepress-id-15 .column-1 {
	text-align: left;
}

    In addition, to turn off the alternating grey and white rows, please uncheck the “Alternating Row Colors” checkbox on the table’s “Edit” screen.

    Regards,
    Tobias

    Thread Starter jesseguttenberg

    (@jesseguttenberg)

    Hi Tobias,

    Thanks for getting back to me so quickly. Can you please help me out with the following? This is the image I currently see: https://i.imgur.com/IG2NoeQ.png

    Issue 1: I can’t seem to get the header row to centralize. Meaning the row with Desktops, iOS phones.

    Issue 2: To remove the background, I have unchecked the option you are referring to: https://i.imgur.com/oQUodUw.png
    However, I still see the alternating grey and white backgrounds.

    Thank you.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    due to the CSS in your theme, we might need some adjustments. Please also add this to the “Custom CSS” below the code from above:

    .tablepress-id-15 thead th {
  text-align: center !important;
}
.tablepress-id-15 tbody td {
  background-color: #ffffff !important;
}

    Regards,
    Tobias

    Thread Starter jesseguttenberg

    (@jesseguttenberg)

    That did the trick. Thanks alot Tobias!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Help with table’ is closed to new replies.