Question

我有一个简单的HTML表格。每个Cell都有一个输入标记。

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

我无法使用handontable，因为我的表会执行一些特定于应用程序的事情。

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

thx求助;）

格鲁斯

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

<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，并且可以通过动手处理。

Answer 1

这个codepen应该让你开始： http://codepen.io/anon/pen/lHcsD

我刚刚从他们的演示中获取了css： http://jsfiddle.net/qxqbP/

并为输入字段添加了一些样式：

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;
}

您需要选择Handsontable CSS以查看相关内容。

Answer 2

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;
        }

如何使一个简单的HTML表看起来像＃34; Handsontable＆＃34;

2 个答案: