I am trying to center the input box inside the column of the table but not working . I am looking for a solution. I have given the column width size in style of the html
<style>
.columnwidth{
width:5em;
}
.datewidth {
width: 8em;
}
</style>
<table id="attendance" class="table cell-border" style="width:100%">
<thead class="thead-light">
<tr>
<td style="text-align:center;width:5em">Sunday<br />NetHrs</td>
<td style="text-align:center;width:5em">Monday<br />NetHrs</td>
<td style="text-align:center;width:5em">Tuesday<br />NetHrs</td>
<td style="text-align:center;width:5em">Wednesday<br />NetHrs</td>
<td style="text-align:center;width:5em">Thursday<br />NetHrs</td>
<td style="text-align:center;width:5em">Friday<br />NetHrs</td>
<td style="text-align:center;width:5em">Saturday<br />NetHrs</td>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center;vertical-align:middle;">@Html.EditorFor(model => model.SundayNetHrs, new { htmlAttributes = new { type = "text", @class = "form-control empHrs columnwidth format-text" } })</td>
<td style="text-align:center;vertical-align:middle;">@Html.EditorFor(model => model.MondayNetHrs, new { htmlAttributes = new { type = "text", @class = "form-control empHrs columnwidth format-text" } })</td>
<td style="text-align:center;vertical-align:middle;">@Html.EditorFor(model => model.TuesdayNetHrs, new { htmlAttributes = new { type = "text", @class = "form-control columnwidth empHrs" } })</td>
<td style="text-align:center;vertical-align:middle;">@Html.EditorFor(model => model.WednesdayNetHrs, new { htmlAttributes = new { type = "text", @class = "form-control columnwidth empHrs" } })</td>
<td style="text-align:center;vertical-align:middle;">@Html.EditorFor(model => model.ThursdayNetHrs, new { htmlAttributes = new { type = "text", @class = "form-control columnwidth empHrs" } })</td>
<td style="text-align:center;vertical-align:middle;">@Html.EditorFor(model => model.FridayNetHrs, new { htmlAttributes = new { type = "text", @class = "form-control columnwidth empHrs" } })</td>
<td style="text-align:center;vertical-align:middle;">@Html.EditorFor(model => model.SaturdayNetHrs, new { htmlAttributes = new { type = "text", @class = "form-control columnwidth empHrs" } })</td>
</tr>
</tbody>
</table>
Not sure what is your empHrs css class. Except for empHrs, form-control class contains dispaly:block which influences the style:
You need add the following css style like below:
<style>
//...
input {
display: inline-block !important;
}
</style>
Result:
