Hard Spocker Hard Spocker - 25 days ago 4
AngularJS Question

How to make a table fillable?

I'm trying to make a good UI by making a table cell update-able by just double clicking the cell, making the clicked cell input type with a value = the existing cell value.

So far I've managed to implement this by integrating input type inside a table cell.

<td class=""><input type="text" ng-model=""></td>


enter image description here

I was wondering if I am on the right track since my goal is a good UI with preferably good UX too. I'm using Laravel and AngularJS.

If I am how do I make the input box border fill the whole cell?

Answer

Some judicious application of CSS can get you the layout you want:

td {
  background-color:#f0f; /* highlight problems */
  padding:0;
}
input {
  display:block;
  width:100%;
}
<table style="width:100%">
<tr>
  <td class=""><input type="text" ng-model=""></td>
</tr>
</table>

As for whether you're on the right track, that's for you to decide. As has been mentioned, there are plenty of frameworks that already do this. If you're trying to learn how to do this sort of thing, go right ahead. Otherwise, use an existing framework.