How can I have an input form fill the entire table data cell but not expand the width of the entire row?

Question

I want to have a row of text inputs at the bottom of my table, whose sizes are the same as the widest element in their row. When I set width:100%, it expands the width of the whole row, which I do not want. My CSS:

table,th,td{
    border-style: solid; 
    border-collapse: collapse;
    border-color:black;
    background-color: var(--background);
    border-width: 3px;

}
th{
    background-color: var(--accent1);
    color:white;
    padding:0px 10px;
}
td{
    background-color:white;
    color:black;
    padding:0px 10px;
}
#centeredTd{
    text-align: center;
}
#inputRow td input{
    width:100%;
    box-sizing: border-box;
}
#endTable{
    border-color:var(--background);
}

.textEntry{
    font-family: 'Poppins', sans-serif;
    color:var(--normal);
    background-color:var(--background);
    border-color:var(--normal);
    width:140px;
    border-radius:5px;
    border-width: 2px;
}

My PHP/HTML

$result = mysqli_query($dbc,"SELECT * FROM `players`");
echo"<table><tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Grade</th><th>Target</th><th>Hunter</th><th>Kills</th><th></th></tr>";


while ($data = mysqli_fetch_array($result)){
    echo"<tr><td>{$data['firstname']}</td><td>{$data['lastname']}</td><td>{$data['email']}</td><td id='centeredTd'>{$data['grade']}</td><td>{$data['target']}</td><td>{$data['hunter']}</td><td id='centeredTd'>{$data['killcount']}</td><td>
    <form action='' method='post'>
        <input type='hidden' name='id' value='".$data['id']."'>
        <input type='submit' class='submit' id='rm' value='-' name='remove'>
    </form>
    </td></tr>";
}
echo"
    <form action='./' method='post'>
        <tr id='inputRow'>
        <td><input type='text' name='firstname' class='textEntry'></td>
        <td><input type='text' name='lastname' class='textEntry'></td>
        <td><input type='text' name='email' class='textEntry' id='emailEntry'></td>
        <td><input type='text' name='grade' class='textEntry' id='gradeEntry'></td><td></td><td></td><td></td>
        <td><input type='submit' value='+' class='submit' id='rm'></td>
        </tr>
    </form>
";
echo"</table>";

I also have formatting for my normal text input fields but I think that should be overridden. Thank you!

Answer 1

HTML text inputs have a size attribute in HTML, specifying the number of characters wide the input should be. The default value is 20. I found that by setting the size to a small number (size='3'), inputs styled with width: 100%; behave as you want them to – they take on the width of the column they are in.

This snippet demonstrates the effect. Note that you may need to view it full page to see the difference.

table {
    border-collapse: collapse;
    margin-bottom: 2em;
}
th, td {
    border: 1px solid #ccc; 
    padding: 5px 10px;
}
th {
    background-color: red;
    color: white;
    white-space: nowrap;
}
.centered {
    text-align: center;
}
.inputRow input {
    box-sizing: border-box;
    border-radius: 5px;
    border-width: 2px;
    width: 100%;
}

<p>In this table, the inputs have a <strong>small specified size</strong></p>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
    <th>Grade</th>
    <th>Target</th>
    <th>Hunter</th>
    <th>Kills</th>
    <th></th>
  </tr>
  <tr>
    <td>Gus</td>
    <td>Christodoulopoulos</td>
    <td>[email protected]</td>
    <td class='centered'>AAA</td>
    <td>Desdemona</td>
    <td>Konstantinos</td>
    <td class='centered'>999</td>
    <td></td>
  </tr>
  <tr>
    <td>Theophilus</td>
    <td>Mastromihalis</td>
    <td>[email protected]</td>
    <td class='centered'>AB-</td>
    <td>Magdalena</td>
    <td>Philadelphia</td>
    <td class='centered'>2</td>
    <td></td>
  </tr>
  <tr class='inputRow'>
    <td><input type='text' name='firstname' size='3'></td>
    <td><input type='text' name='lastname' size='3'></td>
    <td><input type='text' name='email' size='3' id='emailEntry'></td>
    <td><input type='text' name='grade' size='3' id='gradeEntry'></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input type='submit' value='+' class='submit' id='rm'></td>
  </tr>
</table>

<p>And for comparison, in this table, the inputs don't have a specified size. You may need to view this snippet full screen to see the difference.</p>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
    <th>Grade</th>
    <th>Target</th>
    <th>Hunter</th>
    <th>Kills</th>
    <th></th>
  </tr>
  <tr>
    <td>Gus</td>
    <td>Christodoulopoulos</td>
    <td>[email protected]</td>
    <td class='centered'>AAA</td>
    <td>Desdemona</td>
    <td>Konstantinos</td>
    <td class='centered'>999</td>
    <td></td>
  </tr>
  <tr>
    <td>Theophilus</td>
    <td>Mastromihalis</td>
    <td>[email protected]</td>
    <td class='centered'>AB-</td>
    <td>Magdalena</td>
    <td>Philadelphia</td>
    <td class='centered'>2</td>
    <td></td>
  </tr>
  <tr class='inputRow'>
    <td><input type='text' name='firstname'></td>
    <td><input type='text' name='lastname'></td>
    <td><input type='text' name='email' id='emailEntry'></td>
    <td><input type='text' name='grade' id='gradeEntry'></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input type='submit' value='+' class='submit' id='rm'></td>
  </tr>
</table>