我有四个文本框和一个fa图标,下面有一张桌子。我想要的是 文本大小宽度应等于表头列大小。我已经尝试了所有的方法,但它不起作用。我怎么能解决这个问题。非常感谢提前感谢。Help on this topic
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>
答案 0 :(得分: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;
}
答案 1 :(得分:0)
也尝试这种方式。我只是更改了一些宽度尺寸。
<强> CSS 强>
th {
border-bottom: 1px solid black;
}
th,
td {
border-collapse: collapse;
}
tr:nth-child(odd) {
background-color: #dddddd;
}
td {
padding: 7px;
}
<强> CODE 强>
<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;overflow: auto;margin:5px 0px 0px 10px;">
<div style="float:left;width:30%;">
<!-- <input type="hidden" id="num" name="ctid" /> -->
<input type="text" id="name" name="vendornamegr" value="" style="width:99%;height:25px;font-size:15px;" />
</div>
<div style="float:left;width:25%;">
<input type="text" id="designation" name="designation" value="" style="width:99%;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="height:25px;font-size:15px;" required/>
</div>
<div style="float:left;width:25%;">
<input type="email" id="maildgr" name="mailidgr" value="" style="width:99%;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="float:left;max-height:175px;width:100%;overflow: auto;margin:6px 0px 0px 7px;text-align:left;">
<table id=cnttable style="width:100%;font-size:17px;">
<thead>
<tr>
<th style="width:30%;text-align:center;font-size:17px;">Name</th>
<th style="width:25%;text-align:center;font-size:17px;">Designation</th>
<th style="width:15%;text-align:center;font-size:17px;">Mobile</th>
<th style="width:25%;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>