Question

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

enter image description here

Answer 1

与此处的其他解决方案没有太大的不同，但它让我看起来就像你要求左侧的<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版本中，它呈现为：

Example

Answer 2

我建议使用内置<form>的{{1}}。然后，对于每个<table>，您可以放置一个<td>。我已经在下面添加了一些基本CSS样式的快速示例（您可能希望在您的代码中选择CSS更具体）。

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

<强>的index.html

<input type = "text" />

<强>的style.css

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

Answer 3

我认为你不能像这样设置行和列的样式。正如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

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

如何使用css在textarea中显示可视行和列

3 个答案: