Italo Ayres Italo Ayres - 6 days ago 5
CSS Question

How to place an invisible input in each cell of an table

I have this table that should look like this:



With the cells value changeable.

But inside each cell I want a

<input type="number">
with the cell value, and if I click it, I can modify the value.

The most important part is the style. How can I style the table with the input's to keep the same looking?

Now, each cell is constituted by:

<td>
<div>
<p>Cell title</p>
<p onclick="change(this);">Cell value</p>
</div>
</td>


Can anyone help me?

Answer

If you want to add inputs to table cells...here's a Fiddle

input {
  border: none;
  outline: none;
  width: 30px;
  height: 30px;
  text-align: center;
}

Fiddle result

enter image description here