Monday 2 January 2017

Responsive Table CSS (No bootstap)

// HTML

<table id="Table1" class="listtablecss col-lg-11 col-md-11 col-sm-11 col-xs-12" border="0"
                cellpadding="0" cellspacing="5">
                <tbody>
                    <tr>
                        <td>
                            <input id="asdfasd_0" name="asdfasd$0" type="checkbox"><label for="asdfasd_0">Sarva
                                siksha abhiyan</label>
                        </td>
                        <td>
                            <input id="asdfasd_1" name="asdfasd$1" type="checkbox"><label for="asdfasd_1">Mid-day-meal</label>
                        </td>
                        <td>
                            <input id="asdfasd_2" name="asdfasd$2" type="checkbox"><label for="asdfasd_2">Pre-matric
                                scholarship scheme</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="asdfasd_3" name="asdfasd$3" type="checkbox"><label for="asdfasd_3">Post-matric
                                scholarship scheme</label>
                        </td>
                        <td>
                            <input id="asdfasd_4" name="asdfasd$4" type="checkbox"><label for="asdfasd_4">Deucation
                                sheme for Minorities</label>
                        </td>
                        <td>
                            <input id="asdfasd_5" name="asdfasd$5" type="checkbox"><label for="asdfasd_5">Other
                                specify</label>
                        </td>
                    </tr>
                </tbody>

            </table>
// CSS
.listtablecss{width: 100%;text-align: left;table-layout: fixed;}       
        .listtablecss th, td
        {word-wrap: break-word; width: 100%;padding: 4px 0px !important;}       
        @media screen and (max-width: 750px)
        {
            .listtablecss tbody, thead{float: left;}
            .listtablecss tbody{min-width: 120px;}
            .listtablecss td, th{display: block;padding: 4px 0px !important;}

        }


//OUTOUT




No comments:

Post a Comment

Excel Sort values in ascending order using function TEXTJOIN

 Excel ::  Text ::  1,3,5,2,9,5,11 Result :: 1,2,3,5,5,9,11 Formula ::     TEXTJOIN ( ",",1,SORT(MID(SUBSTITUTE( A1 ,","...