html - 如何使用CSS在textarea中显示可视的行和列

Question

如何在 textarea 中创建可视化的行和列？

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 版本中，它呈现为: