How to display visual rows and cols in textarea using css

How to create visual rows and columns inside a textarea?


Not terribly different than the other solutions here, but it's looking to me like you are asking for <input type="text" /> boxes on the left-hand side, and status text on the right-hand side. I agree with the others that the simplest way to create this is with a <table>. Here's an example that looks almost identical to your input:


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


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;

And here is a CSSDesk Snippet which shows it in action. On my version of Chrome, it renders as:

Need Your Help

How do I render form ChoiceField images next to choices without breaking the form?

python html django django-forms

I am trying to render the images of the choices next to their respective choice. Attempting to do so will not save the form as valid so I have become lost at what to do. I've tried both methods bel...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.