changing multiple columns and rows

  • Resolved ThatGuyEditing

    (@trex2303)


    4 years, 1 month ago

    Is there a way to change multiple rows and columns using 1 line of CSS instead of using one for each cell itself?

    If I use something like (Just an example)

    .tablepress-id-1 .row-1 .column-1{
text-align: center; width: 150px; 
font-size: 20px;
color: #ffffff;
background-color: gray;
border: 1px solid black;
width: 250px;
opacity:0.8;
filter:alpha(opacity=60);
}

    This only does 1 cell, how can I do more than 1 cell without having to put the same thing multiple times?

    .tablepress-id-1 .row-2 .column-1{
text-align: center; width: 150px; 
font-size: 20px;
color: #ffffff;
background-color: gray;
border: 1px solid black;
width: 250px;
opacity:0.8;
filter:alpha(opacity=60);
}

    Does the 2nd cell down, and so on and so on.

    I have 3 Columns and 8 rows, so that’s 24 blocks of CSS code I have to type out for each cell. How can I do that with fewer blocks of CSS code?

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

    (@tobiasbg)

    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 ThatGuyEditing

    (@trex2303)

    https://tours.isuxgaming.games/?p=18

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for the link! In your case, it looks like you want to modify all normal body cells. Thus, simply use

    .tablepress-id-1 tbody td {

    instead of

    .tablepress-id-1 .row-1 .column-1{

    (just once).

    Also, I strongly recommend to put this into the “Custom CSS” text area on the “Plugin Options” screen of TablePress and not into a custom CSS section in your theme settings!

    Regards,
    Tobias

    Thread Starter ThatGuyEditing

    (@trex2303)

    I’ve tried entering tags like that in the Custom CSS section of the Plugin Options, but it always gives me an error.

    Like this:
    The entered value in the field “Extra CSS Classes” is invalid.

    So I have to enter it in the Additional CSS under Appearance > Customize > Additional CSS.

    If I enter
    .tablepress-id-1 tbody td { text-align: center; width: 150px; font-size: 20px; color: #ffffff; background-color: gray; border: 1px solid black; width: 250px; opacity:0.8; filter:alpha(opacity=60) vertical-align: middle; }

    In the area you mentioned, That’s the error message I get and can’t enter it in there. Is there some other way to enter that in there?

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    the “Extra CSS Classes” is not the correct field (It’s on the “Edit” screen.)! Please go to the “Plugin Options” of TablePress first, where you will find the correct “Custom CSS” text area.

    Regards,
    Tobias

    Thread Starter ThatGuyEditing

    (@trex2303)

    Okay, I found it. However, adding this:

    .tablepress-id-1 tbody td {
	text-align: center;
	width: 150px;
	font-size: 20px;
	color: #ffffff;
	background-color: gray;
	border: 1px solid black;
	width: 250px;
	opacity: .8;
	filter: alpha(opacity=60);
	vertical-align: middle;
}

    To that area. Caused this:
    https://tours.isuxgaming.games/imgs/light_blue.png

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    please try again with

    .tablepress-id-1 thead th {
    text-align: center;
    width: 150px;
    font-size: 20px;
    color: #ffffff;
    background-color: gray;
    border: 1px solid black;
    width: 250px;
    opacity: 0.8;
    filter: alpha(opacity=60) vertical-align: middle;
}
.tablepress-id-1 tbody td {
    text-align: center;
    font-size: 20px;
    color: #000000;
    border: 1px solid black;
    background-color: #D3D3D3;
    opacity: 0.8;
    filter: alpha(opacity=60);
    vertical-align: middle;
}

    And then please also remove the CSS for all the other individual cells from that other “Custom CSS” textarea.

    For another optimization, please uncheck the “Use DataTables” checkbox on the “Edit” screen of the table.

    Regards,
    Tobias

    Thread Starter ThatGuyEditing

    (@trex2303)

    Thank you, this works Perfect!!! So then I only need to change id-1 to other table #’s.

    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 9 replies - 1 through 9 (of 9 total)
  • The topic ‘changing multiple columns and rows’ is closed to new replies.