Support » Plugin: TablePress » Responsive Recipe with CSS

  • Resolved Alan

    (@alanwhiteman)


    Hi,
    This is not really a support request. I thought I would share the way I made my particular Tablepress table responsive using CSS only. I’m posting it here with the hope that others might find it useful.

    Basically, we set several table elements to ‘Flex’ and apply a 100% width to the rows.

    
    /* Phone styles */
    @media handheld, only screen and (max-width: 800px) {
    
    /*  State Flags Page  */
    
        table.tablepress {
                width: 100% !important;
        }
    
        table.tablepress::before {
    	content: "Sort:";
    	display: block;
    	font-weight: bold;
    	font-size: 16px;
    	color: #777;
    }
    
        .tablepress thead {
                display: flex;
        }
    
        .tablepress thead .row-1,
        .tablepress thead .column-2,
        .tablepress thead .column-5 {
                width: 100% !important;
        }
    
        .tablepress thead th.sorting::after {
        top: 33%;
        }
    
        .tablepress th.column-1,
        .column-3,
        .column-4 {
                display: none;
        }
    
        .column-2, .column-5 {
                display: flex;
                flex-direction: column;
        }
    
        .tablepress tbody {
                display: flex;
                flex-direction: column;
        }
    
        .tablepress tbody tr {
                margin-bottom: 3em;
        }
    
        .tablepress tbody tr td {
                border: none;
                text-align: center;
        }
        
        .tablepress tbody tr td img {
            margin: 15px auto 0;
        }
    
        .tablepress tbody td.column-1 {
                width: 100%;
                text-align: center;
                display: inline-block;
            }
    }

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post and sorry for the delayed reply, as I was on holidays, I could not answer earlier.

    This looks very interesting! I haven’t yet played with the flex CSS property, but it looks promising!
    Thanks for sharing this!

    Best wishes,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive Recipe with CSS’ is closed to new replies.