2

如何创建视觉rows和columns内部textarea？

在此处输入图像描述

4

3 回答 3

3

与这里的其他解决方案并没有太大的不同，但在我看来，就像您要求<input type="text" />左侧的框和右侧的状态文本一样。我同意其他人的观点，即创建它的最简单方法是使用<table>. 这是一个看起来与您的输入几乎相同的示例：

HTML：

<div class="border">
 <table>
  <tr>
   <td><input type="text" value="2245319951" /></td>
   <td>Checkout Failed</td>
  </tr>
  <tr>
   <td><input type="text" /></td>
   <td></td>
  </tr>
  <!-- More repeated rows -->
 </table>
</div>

CSS：

div.border * { 
  font-family: Verdana;
  font-size: 8pt;
}

div.border {
  border: 1px solid #000;
  width: 268px;
  height: 100px;
  overflow-y: scroll;
}
table {
  background: #fff;
  border-collapse: collapse;
}
table, table tr, table td {
  margin: 0;
  padding: 0;
}

table td {
  border: 1px solid #ccc;
  width: 125px;
}

table td:nth-child(2) {
  color: red;
  font-weight: bold;
  padding: 0 5px;
}

table input[type="text"] {
  border: none;
  outline: none;
  width: 125px;
}

这是一个CSSDesk Snippet，它显示了它的实际效果。在我的 Chrome 版本上，它呈现为：

例子

于 2013-05-01T18:16:46.787 回答
2

我建议在里面使用<form>a 。<table>然后对于每个<td>你可以放一个<input type = "text" />. 我在下面提供了一个简单的示例，其中包含一些基本的 CSS 样式（尽管您希望在代码中选择更具体的 CSS）。

http://jsfiddle.net/GGWsj/3/

索引.html

<form>
    <table>
        <tr>
            <td><input type = "text" name = "" /></td>
            <td><input type = "text" name = "" /></td>
        </tr>
        <tr>
            <td><input type = "text" name = "" /></td>
            <td><input type = "text" name = "" /></td>
        </tr>
        <tr>
            <td><input type = "text" name = "" /></td>
            <td><input type = "text" name = "" /></td>
        </tr>
        <tr>
            <td><input type = "text" name = "" /></td>
            <td><input type = "text" name = "" /></td>
        </tr>
        <tr>
            <td><input type = "text" name = "" /></td>
            <td><input type = "text" name = "" /></td>
        </tr>
    </table>
</form>

样式.css

form {
    width:300px;
    height:90px;
    overflow:auto;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

table {
    border-collapse:collapse;
    width:100%;
}

table td {
    border:1px solid #ddd;   
    padding:0;
    margin:0;
}

table tr:first-child td {
    border-top:none;
}

table tr:last-child td {
    border-bottom:none;   
}

input[type="text"] {
    border:none;
    outline:none;
}
于 2013-05-01T17:32:28.320 回答
1

我认为您不能像这样设置行和列的样式。正如 cimmanon 所建议的，您可能在这里使用了错误的元素。也许尝试使用带有overflow-y: scroll应用的表格，以便获得滚动。

编辑

下面的例子：

<table style="overflow-y: scroll">
    <tr>
        <td>2245319951</td>
        <td>Checkout Failed</td>
    </tr>
    <tr>
        <td>1234567890</td>
        <td>Checkout Succeeded</td>
    </tr>
</table>

<td>如果您愿意，可以在元素中插入标签或输入。

编辑#2

我现在创建了一个带有样式黑色环绕边框、灰色内边框和滚动条的 jsFiddle。http://jsfiddle.net/UG6zL/

于 2013-05-01T17:29:40.593 回答