Warm tip: This article is reproduced from serverfault.com, please click

html-如何在表格的每一列内将输入框对齐为中心

(html - How To align the input box as center inside the each column of the table)

发布于 2021-09-07 14:42:15

我想将输入框居中在表格的列内但不工作。我正在寻找解决方案。我已经给出了 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>

Questioner
Alan Pauil
Viewed
0
Rena 2021-09-08 10:46:23

不知道你的empHrscss类是什么。除了empHrsform-control类包含dispaly:block影响样式的:

在此处输入图像描述

你需要添加以下 css 样式,如下所示:

<style>
    //...
    input {
        display: inline-block !important;
    }
</style>

结果: 在此处输入图像描述