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

How to highlight selected text in notepad++

  –> To highlight a block of code in Notepad++, please do the following steps step-1  :- Select the required text. step-2  :- Right click...