How to make a simple HTML table to look like "Handsontable"

Question

i have a simple HTML table. Every Cell holds an input-tag.

Is it possible to make the table to look like http://handsontable.com/ ?

I can not use handsontable, because my table does some application specific things.

Is there a simple way, like "yeah, just use this and this css class"?

thx for your help ;)

gruß

EDIT: ok, i will add some sample-code:

<table>
    <tbody>
        <tr>
            <td>
                <input/>
            </td>
            <td>
                <input/>
            </td>
            <td>
                <input/>
            </td>
        </tr>
        <tr>
            <td>
                <input/>
            </td>
            <td>
                <input/>
            </td>
            <td>
                <input/>
            </td>
        </tr>
    </tbody>
</table>

EDIT2: sry for confusing. The point is: I want my table to look like Excel and handsontable does this.

Answer 1

This codepen should get you started: http://codepen.io/anon/pen/lHcsD

I have just taken the css from their demo here: http://jsfiddle.net/qxqbP/

And added some styling for input fields:

input {
  border:none;
  width:100%;
  height:100%;
  font-family: Verdana, Helvetica, Arial, FreeSans, sans-serif;
  font-size:12px;
  padding: 0 4px 0 4px;
}

input:focus { 
  border:2px solid #5292F7;
  outline: none;
}

You will need to pick through the Handsontable CSS to see what is relevant.