如何使用css顯示textarea中的可視行和列號

Question

如何在textarea內創建視覺rows和columns？

Answer 1

不是比這裏其他的解決方案非常不同，但它看起來像你對我是在左邊請求<input type="text" />框，並且狀態爲t在右側分機。我同意其他人的觀點，最簡單的方法是使用<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這表明它在行動。

Answer 2

我不認爲你可以風格的行和列這樣的。正如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/

Answer 3

我會建議使用<form>並在其內部使用<table>。然後爲每個<td>你可以把一個<input type = "text" />。我在下面包含了一些簡單的例子，介紹了一些基本的CSS樣式（你可能希望在你的代碼中選擇更具體的元素）。

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

的index.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> 

的style.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; 
}