TablePress Responsive tables column width

  • Resolved J.Roos

    (@jroos)


    9 years, 6 months ago

    Hi Tobias,

    I am using Table Press extension Responsive Tables to present a simple calendar on the homepage of our website http://www.wp-n1.nl.

    The font size and font color can be freely adjusted easily with the proper CSS code. However, the column width I do not get to the correct value. See the website http://www.wp-n1.nl homepage. The column width should be about 60% of the present actual width (depending on the font-size).

    Please advise.
    Thanks in advance,
    Jaap Roos

    CSS code to adjust the font size and color:
    .tablepress ID-11 tbody td {
    font-family: Tahoma;
    font-size: 10px;
    color: # ff0000;
    }

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

    (@tobiasbg)

    9 years, 6 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    Just to make sure that I understand: You actually mean the Row Details Extension and not the Responsive Tables Extension, right? And which column width do you want to influence? The “Datum” or the “Onderwerp” column? Or do you mean the entire table?

    Regards,
    Tobias

    Thread Starter J.Roos

    (@jroos)

    9 years, 5 months ago

    Hi Tobias,

    To display the table I use the phrase:
    [table id=11 datatables_row_details=true datatables_row_details_columns=”C-G” /]

    Table11 has the following columns:
    Datum (date),
    Onderwerp (subject),
    Aanvangs- en eindtijd (starting and end time),
    Locatie (location),
    Adres (adress),
    Categorie category),
    Beschrijving (decription),
    Auteur (author),
    Datum plaatsing (publishing date).

    I am looking for a method to decrease the width of the initial table (column date & decription individally or both colums together).

    Thanks in advance.

    Regards Jaap

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 5 months ago

    Hi,

    you could use the “Custom CSS”

    .tablepress th,
.tablepress td {
	padding: 6px !important;
}

    to make the columns more narrow.
    Note that they will still extend to 100% of the table width.

    Regards,
    Tobias

    Thread Starter J.Roos

    (@jroos)

    9 years, 5 months ago

    Hi Tobias,

    Thanks for your swift answer.
    This works fine to reduce the column width for all columns together. However, I want the table-width reduced accordingly. Might that be possible? And how can the table be centered on the page?

    Thanks in advance.

    Regards Jaap

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 5 months ago

    Hi,

    ok. For that, please change

    .tablepress-id-11 {
  width: 75% !important;
}

    to

    #content .tablepress-id-11 {
  width: 75% !important;
  margin: 0 auto 1em !important;
}

    Regards,
    Tobias

    Thread Starter J.Roos

    (@jroos)

    9 years, 5 months ago

    Hi Tobias,

    Thanks for your swift answer.
    This works fine. Might it be possible to place the decription field show #records field and the search field within the tablewidth as well?

    Thanks in advance.

    Regards Jaap

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 5 months ago

    Hi,

    yes, that should also be possible. For that, please modify my code suggestion from the previous reply to

    #tablepress-11_wrapper {
  width: 75% !important;
  margin: 0 auto 1em !important;
}

    Regards,
    Tobias

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

The topic ‘TablePress Responsive tables column width’ is closed to new replies.