Ayuda en la programación, respuestas a preguntas / Php / Cómo obtener superíndice en el campo de edición de formulario - php, html

Cómo obtener superíndice en el campo de edición de formulario - php, html

Estoy creando un crucigrama de tipo usando html y php. Tengo un campo de edición de formulario donde el usuario puede escribir 1 letra. El campo de edición está en una celda de tabla.

        <td><input type="text" maxlength="1" name="$identifier" value="$value"    text-align:center;" size="1px"></td>

Dado que es un crucigrama, me gustaría poderpara mostrar un número en la parte superior izquierda de la celda de la tabla en superíndice. He estado intentando colocarlo antes de la celda de entrada con la etiqueta sup, pero esto lo coloca fuera del campo de edición. También he jugado con el atributo "marcador de posición", pero eso hará que el número desaparezca cuando escribes , que no es el efecto que estoy buscando después. ¿Cómo obtengo un número de superíndice permanente en la celda de mi mesa? ¡Me encantaría recibir ayuda!

Respuestas

2 para la respuesta № 1

Sería algo como esto si usas span

table {
border-collapse: collapse;
}
table td {
position: relative;
}
table td input {
border: 1px solid #ccc;
height: 25px;
width: 25px;
}
table td span {
position: absolute;
top: 0;
left: 0;
font-size: 8px;
background: rgba(255, 255, 255, 0.7);
}

<table border="1">
<tr>
<td><span>1</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>2</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>3</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>4</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>5</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
</tr>
<tr>
<td><span>6</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>7</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>8</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>9</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>10</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
</tr>
<tr>
<td><span>11</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>12</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>13</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>14</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>15</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
</tr>
<tr>
<td><span>16</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>17</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>18</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>19</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>20</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
</tr>
<tr>
<td><span>21</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>22</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>23</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>24</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
<td><span>25</span>
<input type="text" maxlength="1" name="" value="" style="  text-align:center;" size="1px">
</td>
</tr>
</table>

https://jsfiddle.net/6268ugbd/