如何使简单的 HTML 表格看起来像“Handsontable”

Question

我有一个简单的 HTML 表格。每个 Cell 都有一个 input-tag。

是否可以使表格看起来像http://handsontable.com/？

我不能使用 handsontable，因为我的表做了一些特定于应用程序的事情。

有没有一种简单的方法，比如“是的，只需使用这个和这个 css 类”？

谢谢你的帮助;)

格鲁斯

编辑：好的，我将添加一些示例代码：

<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：请不要混淆。关键是：我希望我的表格看起来像 Excel，而 handsontable 可以做到这一点。

Answer 1

从这里获取代码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;
        }