Style an HTML table to look like a Spreadsheet like Google Docs

html css spreadsheet contenteditable
Tawani picture Tawani · Jul 5, 2012 · Viewed 8.6k times · Source

I am trying to create a simple spreadsheet (with a REST/JSON back end) that looks like the Google Docs spreadsheet (or Excel). I have a working model which uses HTML input boxes and Select boxes. Simple HTML spreadsheet

Is there a way to style this so that it looks like a real spreadsheet and uses "ContentEditable=true" and also to handle the Tab keys?

Answer

Andrey picture Andrey · Mar 12, 2016

You can try with this: https://mindmup.github.io/editable-table/ it works with bootstrap, allows edit content, its like a excel spreadsheet but works on a normal HTML table.

It looks like this img: Image editableTableWidget. Obviusly you can custom the style in css.

Related questions

Use arrow keys to navigate an HTML table

I've created a very basic spreadsheet using an HTML table. It works perfectly, except the user must use the mouse to click on every <td> in order to edit it. I'm capturing the click event with jQuery and …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More