html - CSS text-align：左侧无法正常工作
问题描述
我有大量数据，要查看通过搜索生成的结果，我使用表格。根据请求，表中又添加了 5 列，添加这些列后，我可以看到表中的数据没有正确对齐，因为它们应该按照 text-align: left. 我已经以各种方式修改了我的 CSS，但仍然无法解决这个问题。
这是CSS
input{
text-transform: uppercase;
}
#searchResults tbody tr{
text-transform: uppercase;
}
.table-fixed thead {
font-size: 14px;
width: 6720px;
text-align: left;
}
.table-fixed tbody {
overflow-y: auto;
width: 6720px;
max-height:68vh;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
text-align: left;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
border-bottom-width: 0;
text-align: left;
}
.table-fixed thead > tr> th {
border-bottom-width: 0;
text-align: left;
color:white;
}
.scrollDivForTable{
overflow-x: scroll;
}
.col-xs-1{
width: 210px;
text-align: left;
}
tr{
word-wrap: break-word;
}
tr:hover {background-color: #CFD8DC;}
tr:nth-child(odd):hover { background-color:#CFD8DC ;}
tr:nth-child(odd){background-color: #f2f2f2}
td{
font-size: 13px;
color: black;
vertical-align:center;
}
.nav-pills li{
width: 49%;
background-color: #cccccc;
font-size: 13px
}
.nav-pills li:hover{
background-color: #666666;
}
这是 HTML 表格
<div class="panel-body" id="searchResultsPanel" >
<div class="row">
<div class="col-sm-12">
<div class="scrollDivForTable">
<table class="table table-fixed">
<thead >
<tr style="background-color:#757575;">
<th class="col-xs-1">Index</th>
<th class="col-xs-1">CDC No</th>
<th class="col-xs-1">Added Date</th>
<th class="col-xs-1">Passport No</th>
<th class="col-xs-1">Surname</th>
<th class="col-xs-1">Initials</th>
<th class="col-xs-1">Rank</th>
<th class="col-xs-1">Land Phone No</th>
<th class="col-xs-1">Mobile No</th>
<th class="col-xs-1">Confirm Last Contact</th>
<th class="col-xs-1">Email Address</th>
<th class="col-xs-1">Facebook Address</th>
<th class="col-xs-1">Skype ID</th>
<th class="col-xs-1">Last Contacted Date</th>
<th class="col-xs-1">Next Contacted Date</th>
<th class="col-xs-1">Previous Wages</th>
<th class="col-xs-1">Expecting Wages</th>
<th class="col-xs-1">Companies</th>
<th class="col-xs-1">Available Date</th>
<th class="col-xs-1">Job Status</th>
<th class="col-xs-1">COC Type</th>
<th class="col-xs-1">Experience</th>
<th class="col-xs-1">Date of Birth</th>
<th class="col-xs-1">Address</th>
<th class="col-xs-1">City</th>
<th class="col-xs-1">Friends</th>
<th class="col-xs-1">Remarks</th>
<th class="col-xs-1">Type of Nationality</th>
<th class="col-xs-1">Nationality</th>
<th class="col-xs-1">Contacted By</th>
<th class="col-xs-1">To be interviewed on</th>
<th class="col-xs-1">Interviewed By</th>
</tr>
</thead>
<tbody>
<?php
//var_dump($$sqlSearch);
if($sqlSearch != null) {
$resultSearch = $conn->query($sqlSearch);
$index = ((int) $pageNumber - 1) * $numOfDataPerPage;
if ($resultSearch->num_rows > 0) {
// output data of each row
while ($rowSearch = $resultSearch->fetch_assoc()) {
++$index;
?>
<tr class="recordRow">
<td class="col-xs-1 rcdRwDt rcdRwDt1" ><?php echo $index; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt2"><?php echo $rowSearch['cdc']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt3"><?php echo $rowSearch['add_date']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt4"><?php echo $rowSearch['passport']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt5"><?php echo $rowSearch['surname']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt6"><?php echo $rowSearch['initials']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt7 <?php echo $rowSearch['rank']; ?>"><?php echo getValueFrmId("rank", "rank", "idrank", $rowSearch['rank'], "No Rank") ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt8"><?php echo $rowSearch['telephone']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt9"><?php echo $rowSearch['mobile']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt10"><i class="fa fa-mouse-pointer" aria-hidden="true" style=" text-align: left;"></i> Double click to Confirm</td>
<td class="col-xs-1 rcdRwDt rcdRwDt11" style=" text-align: left;"><?php echo $rowSearch['email']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt12"><?php echo $rowSearch['fb']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt13"><?php echo $rowSearch['skype']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt14" style=" text-align: left;"><?php if(($rowSearch['last_contacted_date']=='1800-01-01') ||($rowSearch['last_contacted_date']=='0000-00-00') ||($rowSearch['last_contacted_date']=='')){ echo "<p style='color:red;'><i class='fa fa-phone '></i> Not yet Contacted</p>";}else{ echo ($rowSearch['last_contacted_date']." at ".$rowSearch['last_cont_time']) ;} ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt15"><?php if(($rowSearch['next_date'] =='1800-01-01')){ echo "";}else if(($rowSearch['next_date'] =='0000-00-00')){echo "";}else{ echo $rowSearch['next_date'];} ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt16"><?php echo $rowSearch['pre_wages']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt17"><?php echo $rowSearch['exp_wages']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt18 <?php echo $rowSearch['companies']; ?>"><?php echo getValueListFrmId("companies", "name", "idcompanies", $rowSearch['companies'], ""); ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt19"><?php if(($rowSearch['ava_date'] =='1800-01-01')){ echo "";}else if(($rowSearch['next_date'] =='0000-00-00')){echo "";}else{ echo $rowSearch['ava_date'];} ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt20 <?php echo $rowSearch['job_status']; ?>"><?php echo getValueFrmId("job_status", "status", "idjob_status", $rowSearch['job_status'], "No Status") ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt21 <?php echo $rowSearch['coc_type']; ?>"><?php echo getValueFrmId("coc_type", "coc_type", "idcoc_type", $rowSearch['coc_type'], "No COC Type") ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt22 <?php echo $rowSearch['experience']; ?>"><?php echo getValueListFrmId("vessel_types", "vessel_types", "idvessel_types", $rowSearch['experience'], "No Experience"); ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt23"><?php if(($rowSearch['dob'] =='1800-01-01')){ echo "";}else if(($rowSearch['next_date'] =='0000-00-00')){echo "";}else{ echo $rowSearch['dob'];} ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt24"><?php echo $rowSearch['address']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt25"><?php echo $rowSearch['city']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt26"><?php echo $rowSearch['friends']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt27"><?php echo $rowSearch['remarks']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt28 <?php echo $rowSearch['typeOfNationality']; ?> "><?php echo getValueFrmId("type_of_nationality", "name_of_nationality", "id_type_of_nationality", $rowSearch['typeOfNationality'], ""); ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt29 <?php echo $rowSearch['nationality']; ?>" ><?php echo getValueFrmId("countries", "nationality", "num_code", $rowSearch['nationality'], ""); ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt30 <?php echo $rowSearch['contacted_by']; ?> "><?php echo getValueFrmId("user", "username", "iduser", $rowSearch['contacted_by'], ""); ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt31 "><?php echo $rowSearch['to_be_interviewed_on']; ?></td>
<td class="col-xs-1 rcdRwDt rcdRwDt32 <?php echo $rowSearch['to_be_interviewed_by']; ?> "><?php echo getValueFrmId("superintendents", "superintendent_name", "superintendent_id", $rowSearch['to_be_interviewed_by'], ""); ?> </td>
</tr>
<?php
}
}
} else {
?>
<tr>
<td class="col-xs-1" colspan="32">No Record Found</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
这是结果的快照
这是html输出
<div class="panel-body" id="searchResultsPanel" >
<div class="row">
<div class="col-sm-12">
<div class="scrollDivForTable">
<table class="table table-fixed">
<thead >
<tr style="background-color:#757575;">
<th class="col-xs-1">Index</th>
<th class="col-xs-1">CDC No</th>
<th class="col-xs-1">Added Date</th>
<th class="col-xs-1">Passport No</th>
<th class="col-xs-1">Surname</th>
<th class="col-xs-1">Initials</th>
<th class="col-xs-1">Rank</th>
<th class="col-xs-1">Land Phone No</th>
<th class="col-xs-1">Mobile No</th>
<th class="col-xs-1">Confirm Last Contact</th>
<th class="col-xs-1">Email Address</th>
<th class="col-xs-1">Facebook Address</th>
<th class="col-xs-1">Skype ID</th>
<th class="col-xs-1">Last Contacted Date</th>
<th class="col-xs-1">Next Contacted Date</th>
<th class="col-xs-1">Previous Wages</th>
<th class="col-xs-1">Expecting Wages</th>
<th class="col-xs-1">Companies</th>
<th class="col-xs-1">Available Date</th>
<th class="col-xs-1">Job Status</th>
<th class="col-xs-1">COC Type</th>
<th class="col-xs-1">Experience</th>
<th class="col-xs-1">Date of Birth</th>
<th class="col-xs-1">Address</th>
<th class="col-xs-1">City</th>
<th class="col-xs-1">Friends</th>
<th class="col-xs-1">Remarks</th>
<th class="col-xs-1">Type of Nationality</th>
<th class="col-xs-1">Nationality</th>
<th class="col-xs-1">Contacted By</th>
<th class="col-xs-1">To be interviewed on</th>
<th class="col-xs-1">Interviewed By</th>
</tr>
</thead>
<tbody>
<tr class="recordRow">
<td class="col-xs-1 rcdRwDt rcdRwDt1" >1</td>
<td class="col-xs-1 rcdRwDt rcdRwDt2">000001</td>
<td class="col-xs-1 rcdRwDt rcdRwDt3">2019-06-10</td>
<td class="col-xs-1 rcdRwDt rcdRwDt4">N02025</td>
<td class="col-xs-1 rcdRwDt rcdRwDt5">new namw</td>
<td class="col-xs-1 rcdRwDt rcdRwDt6">fg</td>
<td class="col-xs-1 rcdRwDt rcdRwDt7 53">MMT</td>
<td class="col-xs-1 rcdRwDt rcdRwDt8"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt9">454545</td>
<td class="col-xs-1 rcdRwDt rcdRwDt10"><i class="fa fa-mouse-pointer" aria-hidden="true"></i> Double click to Confirm</td>
<td class="col-xs-1 rcdRwDt rcdRwDt11">dfdasfhg@cc.com</td>
<td class="col-xs-1 rcdRwDt rcdRwDt12">dfdf</td>
<td class="col-xs-1 rcdRwDt rcdRwDt13">ddff</td>
<td class="col-xs-1 rcdRwDt rcdRwDt14">2019-06-14 at 08:51:31</td>
<td class="col-xs-1 rcdRwDt rcdRwDt15">2019-07-23</td>
<td class="col-xs-1 rcdRwDt rcdRwDt16">450</td>
<td class="col-xs-1 rcdRwDt rcdRwDt17">500</td>
<td class="col-xs-1 rcdRwDt rcdRwDt18 79,">A N Nomikcs</td>
<td class="col-xs-1 rcdRwDt rcdRwDt19">2019-06-15</td>
<td class="col-xs-1 rcdRwDt rcdRwDt20 4">Active</td>
<td class="col-xs-1 rcdRwDt rcdRwDt21 3">Eng Class V</td>
<td class="col-xs-1 rcdRwDt rcdRwDt22 22,">Barge</td>
<td class="col-xs-1 rcdRwDt rcdRwDt23">1983-03-01</td>
<td class="col-xs-1 rcdRwDt rcdRwDt24">djhdfghsshdgsh</td>
<td class="col-xs-1 rcdRwDt rcdRwDt25">vghfvhgfh</td>
<td class="col-xs-1 rcdRwDt rcdRwDt26">no friendsvjhg</td>
<td class="col-xs-1 rcdRwDt rcdRwDt27">ffg dgd</td>
<td class="col-xs-1 rcdRwDt rcdRwDt28 1 ">Sri Lankan</td>
<td class="col-xs-1 rcdRwDt rcdRwDt29 144" >Sri Lankan</td>
<td class="col-xs-1 rcdRwDt rcdRwDt30 1 ">super</td>
<td class="col-xs-1 rcdRwDt rcdRwDt31 ">2019-06-20</td>
<td class="col-xs-1 rcdRwDt rcdRwDt32 6 ">Superintendent 02 </td>
</tr>
<tr class="recordRow">
<td class="col-xs-1 rcdRwDt rcdRwDt1" >2</td>
<td class="col-xs-1 rcdRwDt rcdRwDt2">018395</td>
<td class="col-xs-1 rcdRwDt rcdRwDt3">2019-04-25</td>
<td class="col-xs-1 rcdRwDt rcdRwDt4">N2060876</td>
<td class="col-xs-1 rcdRwDt rcdRwDt5">Perera</td>
<td class="col-xs-1 rcdRwDt rcdRwDt6">A.A.Sugath Anton Jayalal</td>
<td class="col-xs-1 rcdRwDt rcdRwDt7 20">MOTO</td>
<td class="col-xs-1 rcdRwDt rcdRwDt8"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt9">0726377797</td>
<td class="col-xs-1 rcdRwDt rcdRwDt10"><i class="fa fa-mouse-pointer" aria-hidden="true"></i> Double click to Confirm</td>
<td class="col-xs-1 rcdRwDt rcdRwDt11"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt12"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt13"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt14"><p style='color:red;'><i class='fa fa-phone '></i> Not yet Contacted</p></td>
<td class="col-xs-1 rcdRwDt rcdRwDt15"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt16">0</td>
<td class="col-xs-1 rcdRwDt rcdRwDt17">0</td>
<td class="col-xs-1 rcdRwDt rcdRwDt18 4,">Anna</td>
<td class="col-xs-1 rcdRwDt rcdRwDt19"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt20 4">Active</td>
<td class="col-xs-1 rcdRwDt rcdRwDt21 0">No COC Type</td>
<td class="col-xs-1 rcdRwDt rcdRwDt22 2,9,">General Cargo Ship,Oil Tanker</td>
<td class="col-xs-1 rcdRwDt rcdRwDt23"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt24">No.28/3,Alehiwatta Rd,Walisara,Ragama.</td>
<td class="col-xs-1 rcdRwDt rcdRwDt25">Ragama</td>
<td class="col-xs-1 rcdRwDt rcdRwDt26"></td>
<td class="col-xs-1 rcdRwDt rcdRwDt27">MMM Application received on 04.05.16.</td>
<td class="col-xs-1 rcdRwDt rcdRwDt28 "></td>
<td class="col-xs-1 rcdRwDt rcdRwDt29 " ></td>
<td class="col-xs-1 rcdRwDt rcdRwDt30 "></td>
<td class="col-xs-1 rcdRwDt rcdRwDt31 "></td>
<td class="col-xs-1 rcdRwDt rcdRwDt32 "> </td>
</tr>
解决方案
推荐阅读
- javascript - 为什么这条评论会在 Javascript/React 代码中作为参数传递？
- xcode - 核心数据滑动删除实现中的错误
- php - Laravel - 子域路由前缀导致其他路由不返回“未找到”
- typescript - typescript 接受一元 fn 尽管类型为二进制
- java - Windows 上的 gradle assemble 版本上的 JAVA_HOME 错误
- c# - Castle Winsdor - 通过类型化工厂传递的传播依赖项
- angular - 仅向 *ngFor 广播增量更改？
- python - 在 python/selenium 中检查代理
- r - 根据 data.frame 中每组的 xy 坐标计算斜率
- python-3.x - 如何从python中的二维列表中选择一些在第0位具有相同值的项目