BEGENING OF CSS > TABLE WITH SCROLLBAR AND FIXED HEADER POSITION > How to make Scrollable Table with fixed headers using CSS

Jsfiddle link to check

<div class="fixed-table-container"> <div class="header-background"> </div> <div class="fixed-table-container-inner"> <table cellspacing="0"> <thead> <tr> <th class="first"> <div class="th-inner">First</div> </th> <th> <div class="th-inner">Second</div> </th> <th> <div class="th-inner">Third</div> </th> <th> <div class="th-inner">Fourth</div> </th> </tr> </thead> <tbody> <tr> <td>First</td> <td>First</td> <td>First</td> <td>First</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Third</td> <td>Fourth</td> </tr> <tr> <td>First</td> <td>Second</td> <td>Fourth</td> <td>Third</td> </tr> <tr> <td>Last</td> <td>Last</td> <td>Last</td> <td>Last</td> </tr> </tbody> </table> </div> </div>

.fixed-table-container { width: 70%; height: 200px; border: 1px solid black; margin: 10px auto; background-color: white; position: relative; padding-top: 30px; } .fixed-table-container .header-background { background-color: #D5ECFF; height: 30px; position: absolute; top: 0; right: 0; left: 0; border-bottom: 1px solid black; } .fixed-table-container .fixed-table-container-inner { overflow-x: hidden; overflow-y: auto; height: 100%; } .fixed-table-container table { background-color: white; width: 100%; overflow-x: hidden; overflow-y: auto; } .fixed-table-container th { padding: 0 5px; text-align: left; } .fixed-table-container .first .th-inner { border-left: none; padding-left: 6px; } .fixed-table-container .th-inner { position: absolute; top: 0; line-height: 30px; text-align: left; border-left: 1px solid black; padding-left: 5px; margin-left: -5px; } .fixed-table-container td + td { border-left: 1px solid #ccc; } .fixed-table-container td { border-bottom: 1px solid #ccc; padding: 5px; text-align: left; }

Responsive CSS: Responsive Table Data Representation

We can easily display our tables in table view for normal browser and list view for mobile device easily. Below is a code snippet:

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style type="text/css">
    .responsive {
        width: 100%;
        font-size: 18px;
    }
    .responsive thead td {
        padding: 7px;
        background-color: #8b91a2;
    }
    .responsive tbody td {
        padding: 7px;
    }
    .responsive .visible-xs {
        display: none;
    }
    @media screen and (min-width: 0px) and (max-width: 768px) {
        .responsive td {
            font-size: 18px;
        }
        .responsive .hidden-xs {
            display: none !important;
        }
        .responsive .visible-xs {
            display: table-row !important;
        }
        .responsive tbody td {
            display: block;
            width: 100%;
            border: 0 !important;
            box-sizing: border-box !important;
            padding: 0 10px !important;
            font-size: 24px;
        }
        .responsive .separator {
            display: inline-block !important;
            background-color: moccasin;
            width: 100%;
            height: 7px
        }
    }
</style>
<table class="responsive">
    <thead>
    <tr class="hidden-xs">
        <td>NAME</td>
        <td>ROLL</td>
        <td>STATUS</td>
        <td>GPA</td>
    </tr>
    </thead>
    <tbody>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00303</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.50</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00304</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.51</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00305</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.52</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00306</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.53</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00307</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.54</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    <tr>
        <td><span class="visible-xs">NAME:</span>Pritom</td>
        <td><span class="visible-xs">ROLL:</span>00308</td>
        <td><span class="visible-xs">STATUS:</span>PASSED</td>
        <td><span class="visible-xs">GPA:</span>4.55</td>
    </tr>
    <tr><td class="visible-xs separator" colspan="4"><div>&nbsp;</div></td></tr>
    </tbody>
</table>

MySQL Update Table Using Join Of Other Tables | MySQL Join Table On Update

UPDATE table1 AS t1 LEFT JOIN table2 AS t2 ON (t1.t2_id = t2.id)
SET t1.some_field = t1.some_field + 1 
WHERE t1.id in (1,2,3) AND t2.some_field = "SOME MATCH VALUE"

CakePHP 3.X Get Database Table Name From Model

TableRegistry::get("Test2")->getTable();

Get all columns from all MySQL tables

SELECT * FROM information_schema.columns
WHERE table_schema = 'database_name'
ORDER BY table_name, ordinal_position

CKEditor basic table operations plugin

Download full plugin.

Make a entry in config.js file like this:
config.extraPlugins = "tableoperations";

You must have 'table' plugin included with your CKEDITOR.

Add name 'tableoperations' when you initialize your ckeditor.
CKEDITOR.replace('text_area_id', {
 toolbar: [
  {
   name: 'tableoperations',
   items : [ '-', 'Table', 'TableInsertRowBefore',  'TableInsertRowAfter', 'TableRowDelete', '-',
                            'TableInsertColumnBefore', 'TableInsertColumnAfter', 'TableColumnDelete', '-', 'TableCellMerge',
                            'TableCellSplitVertical', 'TableCellSplitHorizontal', 'TableDeleteTable' ]
  }
 ]
});

plugin.js file:

CKEDITOR.plugins.add('tableoperations', {
    requires : [ 'table' ],
    init : function( editor ){
        editor.addCommand('tblOpInsertRowBefore', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('rowInsertBefore',editor);
            }
        });
      
        editor.addCommand('tblOpInsertRowAfter', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('rowInsertAfter',editor);
            }
        });
      
        editor.addCommand('tblOpRowDelete', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('rowDelete',editor);
            }
        });
      
        editor.addCommand('tblOpInsertColumnBefore', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('columnInsertBefore',editor);
            }
        });
      
        editor.addCommand('tblOpInsertColumnAfter', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('columnInsertAfter',editor);
            }
        });
      
        editor.addCommand('tblOpColumnDelete', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('columnDelete',editor);
            }
        });
      
        editor.addCommand('tblOpCellMerge', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                try{
                    editor.execCommand('cellMerge',editor);
                }
                catch(err){
                    console.log(err.message);
                }
            }
        });
      
        editor.addCommand('tblOpCellSplitVertical', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('cellVerticalSplit',editor);
            }
        });
      
        editor.addCommand('tblOpCellSplitHorizontal', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('cellHorizontalSplit',editor);
            }
        });
      
        editor.addCommand('tblOpDeleteTable', {
            exec : function( editor ){
                if(!editor.getSelection().getStartElement().getAscendant( 'table', 1 ))
                    return;
                editor.execCommand('tableDelete',editor);
            }
        });
      
        editor.ui.addButton('TableInsertRowBefore', {
            label : 'Insert Row Before',
            command : 'tblOpInsertRowBefore',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 69
        });
      
        editor.ui.addButton('TableInsertRowAfter', {
            label : 'Insert Row After',
            command : 'tblOpInsertRowAfter',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 61
        });
      
        editor.ui.addButton('TableRowDelete', {
            label : 'Delete Row',
            command : 'tblOpRowDelete',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 62
        });
      
        editor.ui.addButton('TableInsertColumnBefore', {
            label : 'Insert Column Before',
            command : 'tblOpInsertColumnBefore',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 70
        });
      
        editor.ui.addButton('TableInsertColumnAfter', {
            label : 'Insert Column After',
            command : 'tblOpInsertColumnAfter',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 63
        });
      
        editor.ui.addButton('TableColumnDelete', {
            label : 'Delete Column',
            command : 'tblOpColumnDelete',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 64
        });
      
        editor.ui.addButton('TableCellMerge', {
            label : 'Merge Cells',
            command : 'tblOpCellMerge',
            icon : this.path + '../../skins/' + editor.skinName + '/icons.png',
            iconOffset : 59
        });
      
        editor.ui.addButton('TableCellSplitVertical', {
            label : 'Split Cell Vertically',
            command : 'tblOpCellSplitVertical',
            icon : this.path + '/split_cell_vertically.png'
        });
      
        editor.ui.addButton('TableCellSplitHorizontal', {
            label : 'Split Cell Horizontally',
            command : 'tblOpCellSplitHorizontal',
            icon : this.path + '/split_cell_horizontally.png'
        });
      
        editor.ui.addButton('TableDeleteTable', {
            label : 'Delete Table',
            command : 'tblOpDeleteTable',
            icon : this.path + '/delete_table.gif'
        });
    }
});