WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] centering tables (4 posts)

  1. brigerard
    Member
    Posted 1 year ago #

    Hello Tobias,
    I have another problem with the centering tables;
    The first table is correctly centered, but the following tables aligned to left on the first table, this is a problem if the width is different;
    How to center each table individually.

    cordially
    Gerard

    .dataTables_wrapper {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	width: 380px !important;
    }
    
    .tablepress {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	width: 600px !important;
    }
    
    .tablepress th {
    	font-family: Calibri;
    	font-size: 14px;
    	color: #282828;
    	background-color: #787878;
    	text-align: center;
    }
    
    .tablepress td {
    	font-family: Calibri;
    	font-size: 14px;
    	text-align: center;
    	color: #282828;
    	background-color: #D0D0D0;
    }
    
    .tablepress .even td {
    	background-color: #F0F0F0;
    }
    
    .tablepress .odd td {
    	background-color: #D0D0D0;
    }
    
    .tablepress .row-hover tr:hover td {
    	background-color: #FFFF00 !important;
    }
    
    .tablepress .sorting {
    	background-color: #787878;
    }
    
    .tablepress .column-2 {
    	text-align: left;
    }
    
    .tablepress-id-9 {
    	width: 350px !important;
    }
    
    .tablepress-id-9 .column-1 {
    	text-align: left;
    }
    
    .tablepress-id-10 {
    	width: 600px !important;
    }
    
    .tablepress-id-11 .column-1 {
    	text-align: left;
    }

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Gerard,

    you will need to change the width for the container for each each table individually.
    Currently, this is setting the widths and alignment:

    .dataTables_wrapper {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	width: 380px !important;
    }
    
    .tablepress {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	width: 600px !important;
    }

    First, this would apply to all tables, regardless of what width they have. And secondly, this can have weird results, as the width of the table is set to 600px, while the width of the container of the table is only 380px.
    So, you should try to correct this by setting the width for each table's container individually. Setting a width for the table should then not be necessary. So, please replace the code from above with this:

    .dataTables_wrapper {
    	margin-left: auto !important;
    	margin-right: auto !important;
    }
    #tablepress-1_wrapper {
      width: 400px;
    }
    #tablepress-4_wrapper {
      width: 500px;
    }

    In this example, I set the width of table 1 to 400px, and that of table 4 to 500px. Just copy and adjust that as necessary.

    Regards,
    Tobias

  3. brigerard
    Member
    Posted 1 year ago #

    Thanks
    Cordially
    GĂ©rard

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    your absolutely welcome! :-)

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic