2 column width

  • Resolved CLT

    (@clt)


    11 years, 6 months ago

    trying to have 2 evenly spaced columns on this page <https://clt.manoa.hawaii.edu/clt-projects/&gt;. I’ve added the following custom css, input various width settings but nothing has changed?

    .tablepress-id-31 .column-1,
    .tablepress-id-31 .column-2 {
    width: 30%;
    }

    .tablepress-id-1 .column-1 {
    text-align: center;
    vertical-align: middle;
    }

    .tablepress-id-1 .column-2 {
    text-align: center;
    vertical-align: middle;
    }

    .tablepress-id-1,
    .tablepress-id-1 tr,
    .tablepress-id-1 tbody td,
    .tablepress-id-1 thead th,
    .tablepress-id-1 tfoot th {
    border: none;
    }

    https://wordpress.org/plugins/tablepress/

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

    (@tobiasbg)

    11 years, 6 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Well, with that CSS code, you would be setting the column widths of table 31. However, the table on that page has the ID 1. Also, the width of 30% in a two-column table won’t really work.
    Those, please try again with

    .tablepress-id-1 .column-1,
.tablepress-id-1 .column-2 {
	width: 50%;
	text-align: center;
	vertical-align: middle;
}

.tablepress-id-1 tbody td {
	border: none;
}

    (I have also optimized/shortened the CSS a bit.)

    Regards,
    Tobias

    Thread Starter CLT

    (@clt)

    11 years, 6 months ago

    Tobias,
    Thank you, that code did the trick!

    Thread Starter CLT

    (@clt)

    11 years, 6 months ago

    Tobias,
    1 more question. If I wanted to add a few more table ids, where would I slot that in the code?

    thank you

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years, 6 months ago

    Hi,

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

    To extend this to more tables, you can extend this like this:

    .tablepress-id-1 .column-1,
.tablepress-id-1 .column-2,
.tablepress-id-2 .column-1,
.tablepress-id-2 .column-2,
.tablepress-id-5 .column-1,
.tablepress-id-5 .column-2 {
	width: 50%;
	text-align: center;
	vertical-align: middle;
}

.tablepress-id-1 tbody td,
.tablepress-id-2 tbody td,
.tablepress-id-5 tbody td {
	border: none;
}

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

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

The topic ‘2 column width’ is closed to new replies.