html - 将文本框大小调整为与表格大小相等

Question

我有四个文本框和一个 fa 图标，下面有一个表格。我想要的是文本大小宽度应等于表格标题栏的大小。我已经尝试了所有方法，但它不起作用。我该如何解决。任何帮助将不胜感激提前致谢。

th {
  border-bottom: 1px solid black;
}

th,
td {
  border-collapse: collapse;
}

tr:nth-child(odd) {
  background-color: #dddddd;
}

td {
  padding: 7px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div id="a12" style="float:left;width:100%;text-align:left;margin:5px 0px 0px 10px;">
  <div style="float:left;width:26%;">
    <input type="hidden" id="num" name="ctid" />
    <input type="text" id="name" name="vendornamegr" value="" style="width:95%;height:25px;font-size:15px;" />
  </div>
  <div style="float:left;width:23%;">
    <input type="text" id="designation" name="designation" value="" style="width:95%;height:25px;font-size:15px;" required />
  </div>
  <div style="float:left;width:12%;padding-left:2%;">
    <input type="text" id="mobilegr" name="mobilegr" value="" minlength="10" maxlength="10" style="height:25px;font-size:15px;" required/>
  </div>
  <div style="float:left;width:22%;padding-left:4%;">
    <input type="email" id="maildgr" name="mailidgr" value="" style="width:105%;height:25px;font-size:15px;" required/>
  </div>
  <div class="txtcbt" style="float:left;width:5%;padding-left:4%;">
    <a href="#"><i class="fa fa-plus" style="font-size:25px;color:white;background-color:#dc143c;"></i></a>
  </div>
</div>

<div id="tables" class="scrollingTable" style="float:left;max-height:175px;max-width:99%;overflow: auto;margin:6px 0px 0px 7px;text-align:left;">
  <table id=cnttable style="width:100%;font-size:17px;">
    <thead>
      <tr>
        <th style="width:38%;text-align:center;font-size:17px;">Name</th>
        <th style="width:20%;text-align:center;font-size:17px;">Designation</th>
        <th style="width:15%;text-align:center;font-size:17px;">Mobile</th>
        <th style="width:24%;text-align:center;font-size:17px;">Email-Id</th>
        <th style="width:5%;text-align:center;font-size:17px;">Edit</th>
      </tr>
    </thead>
    <tbody>


    </tbody>

  </table>
</div>

Answer 1

我已经更新了你的代码，做了很多改动。比如删除不需要的样式并添加新样式并使其看起来像您期望的那样。

HTML

 <div id="a12" style="float:left;width:100%;text-align:left; margin-bottom:10px;">
    <div style="float:left;width:36%;">
       <input type="hidden" id="num" name="ctid" />
       <input type="text" id="name" name="vendornamegr" value="" style="width:90%;height:25px;font-size:15px;" />
    </div>
    <div style="float:left;width:20%;">
       <input type="text" id="designation" name="designation" value="" style="width:90%;height:25px;font-size:15px;" required />
    </div>
    <div style="float:left;width:15%;">
       <input type="text" id="mobilegr" name="mobilegr" value="" minlength="10" maxlength="10" style="width:90%; height:25px;font-size:15px;" required/>
    </div>
    <div style="float:left;width:24%;">
       <input type="email" id="maildgr" name="mailidgr" value="" style="width:90%;height:25px;font-size:15px;" required/>
    </div>
    <div class="txtcbt" style="float:left;width:5%;">
        <a href="#"><i class="fa fa-plus" style="font-size:25px;color:white;background-color:#dc143c;"></i></a>
    </div>
 </div>

 <div id="tables" class="scrollingTable" style="max-height:175px;overflow: auto; width:100%;">
     <table cellspacing="0" cellpadding="0" id=cnttable>
       <thead>
          <tr>
            <th style="width:36%;text-align:center;font-size:17px;">Name</th>
            <th style="width:20%;text-align:center;font-size:17px;">Designation</th>
            <th style="width:15%;text-align:center;font-size:17px;">Mobile</th>
            <th style="width:24%;text-align:center;font-size:17px;">Email-Id</th>
            <th style="width:5%;text-align:center;font-size:17px;">Edit</th>
         </tr>
       </thead>
       <tbody>

       </tbody>
    </table>
 </div>

CSS

 table {
   box-sizing:border-box;
   width:100%;
   border-top: 1px solid black;
   border-left:1px solid black;
 }
 th {
   border-bottom: 1px solid black;
   border-right:1px solid black;
 }
 th, td {
   border-collapse: collapse;
 }
 tr:nth-child(odd) {
   background-color: #dddddd;
 }
 #a12 > div {
   text-align:center;
 }

DEMO