You can use this framework:
link
It is not necessarily just css classes like the bootstrap, but goes much further:
- Resizable columns
- Excel-style headers that the user or programmer can hide
- Can be displayed in zebra-striped mode for better presentation
- Data can be passed to initialize the worksheet
- The user or programmer can add and delete rows and columns
- Unlike other spreadsheets, display only as many rows and columns as you need.
- Add or delete them in your script as needed, or allow a user to do so.
- Data can be deleted, copied and pasted from / to a
single cell or an entire row, within a worksheet or between
multiple worksheets Keyboard interaction (keys Ctrl + C, Ctrl + V,
Enter and Tab / Shift + Tab) Data can be retrieved in one
Two-dimensional string array Multiple worksheets can be displayed
on a fully exposed API page
An example code made with it:
Instead of a table in your html, you will have to enter a DIV:
<div id = "contents" style = "margin-bottom: 20px">
The secret of how it will behave is in the javascript code:
$(document).ready(function () {
var aData = [ [ "Redwood City", "300", "true" ], [ "San Francisco", "100", "true" ], [ "San Jose", "500", "false" ] ];
var oTable = $( "div#contents" ).spreadsheet(
{ rows: 0, cols: 0, data: aData, zebra_striped: true, read_only: false, rowheader: true, colheader: true } );
oTable.setNumeric( 1, true );
$( "div#contents2" ).spreadsheet(
{ rows: 10, cols: 10, data: null, zebra_striped: false, read_only: false, rowheader: true, colheader: true } );
} );
Each parameter of this does some kind of action when initializing the framework
in div "contents"
For more parameter information see the documentation:
link
Remember that it depends on the jQuery framework.
