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

1
votes

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.

2
htmlcsshandsontable
use Bootstrap getbootstrap.com/css/#tables – Renish Khunt
Do you want just the look, or also the editing capabilities of handsontable? – jcaron
do you have to add data into table? – Sudheer
You might want to add sample code, so people can quickly respond to your question and don't have to leave the site for it! – sidneydobber
@renishkhunt sry, i need the "Excel"-look – user3796786

2 Answers

8
votes

GetCode From Here TableCSS

html

    <table>

    <thead>
        <tr>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
    </tbody>
</table>

css

    html{
            font:0.75em/1.5 sans-serif;
            color:#333;
            background-color:#fff;
            padding:1em;
        }

        /* Tables */
        table{
            width:100%;
            margin-bottom:1em;
            border-collapse: collapse;
        }
        th{
            font-weight:bold;
            background-color:#ddd;
        }
        th,
        td{
            padding:0.5em;
            border:1px solid #ccc;
        }
4
votes

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.