
Is there a way to make text input field - but only to like 5-10 characters? I do attack table for OGL D&D 5E game, and whole text inputs are too big to the data I put in those. Nominally columns Range , Mod and DMG could certainly by only few character wide and be more than enough. Here is my code: <div class="sheet__descriptions">
<table>
<tr>
<th>Attack</th>
<th>Range</th>
<th>Mod</th>
<th>Roll</th>
<th>DMG</th>
<th> </th>
<th>Type/Quality</th>
</tr>
<tr>
<td>
<input type="text" name="attr_attack1">
</td>
<td>
<input type="text" name="attr_range1" value="5 ft.">
</td>
<td>
<select name="attr_att_mod1">
<option value="@{str_mod}">Str</option>
<option value="@{dex_mod}">Dex</option>
</select>
</td>
<td>
<input type="number" name="attr_att_roll1" value="@{att_mod1}+@{prof}">
</td>
<td>
<input type="text" name="attr_dmg1">
</td>
<td>
+<input type="number" disabled="true" name="attr_dmg_bon1" value="@{att_mod1}">
</td>
<td>
<input type="text" name="attr_att_type1">
</td>
</tr>
<tr>
<td>
<input type="text" name="attr_attack2">
</td>
<td>
<input type="text" name="attr_range2" value="5 ft.">
</td>
<td>
<select name="attr_att_mod2">
<option value="@{str_mod}">Str</option>
<option value="@{dex_mod}">Dex</option>
</select>
</td>
<td>
<input type="number" name="attr_att_roll2" value="@{att_mod2}+@{prof}">
</td>
<td>
<input type="text" name="attr_dmg2">
</td>
<td>
+<input type="number" disabled="true" name="attr_dmg_bon2" value="@{att_mod2}">
</td>
<td>
<input type="text" name="attr_att_type2">
</td>
</tr>
<tr>
<td>
<input type="text" name="attr_attack3">
</td>
<td>
<input type="text" name="attr_range3" value="5 ft.">
</td>
<td>
<select name="attr_att_mod3">
<option value="@{str_mod}">Str</option>
<option value="@{dex_mod}">Dex</option>
</select>
</td>
<td>
<input type="number" name="attr_att_roll3" value="@{att_mod3}+@{prof}">
</td>
<td>
<input type="text" name="attr_dmg3">
</td>
<td>
+<input type="number" disabled="true" name="attr_dmg_bon3" value="@{att_mod3}">
</td>
<td>
<input type="text" name="attr_att_type3">
</td>
</tr>
<tr>
<td>
<input type="text" name="attr_attack4">
</td>
<td>
<input type="text" name="attr_range4" value="5 ft.">
</td>
<td>
<select name="attr_att_mod4">
<option value="@{str_mod}">Str</option>
<option value="@{dex_mod}">Dex</option>
</select>
</td>
<td>
<input type="number" name="attr_roll1" value="@{att_mod4}+@{prof}">
</td>
<td>
<input type="text" name="attr_dmg4">
</td>
<td>
+<input type="number" disabled="true" name="attr_dmg_bon4" value="@{att_mod4}">
</td>
<td>
<input type="text" name="attr_att_type4">
</td>
</tr>
<tr>
<td>
<input type="text" name="attr_attack5">
</td>
<td>
<input type="text" name="attr_range5" value="5 ft.">
</td>
<td>
<select name="attr_att_mod5">
<option value="@{str_mod}">Str</option>
<option value="@{dex_mod}">Dex</option>
</select>
</td>
<td>
<input type="number" name="attr_att_roll5" value="@{att_mod5}+@{prof}">
</td>
<td>
<input type="text" name="attr_dmg5">
</td>
<td>
+<input type="number" disabled="true" name="attr_dmg_bon5" value="@{att_mod5}">
</td>
<td>
<input type="text" name="attr_att_type5">
</td>
</tr>
</table>
</div>