将HTML数据行与标题对齐
我在HTML表格中有35个未与数据行对齐的标题。我正在粘贴我的html和css文件供您参考。
HTML代码 -
<div class="hmcdata" >
<div class="row">
<div class="col-md-12 page-title">LPAR Report</div>
</div>
<div class="row">
<div class="col-md-10">
<span class="search-filter"> On-Screen Filter: <input ng-model="searchText" /></span>
</div>
<div class="col-md-2 set-left">
<div class="previous" ng-click="goBack()">Previous:</div>
</div>
</div>
<div id="lparReport" style="overflow:scroll;overflow:auto" >
<table class="table table-striped fixed-table " fixed-header>
<thead>
<tr class="header">
<th class="table-title-text" style="width: 100px">
<a href="#" ng-click="sortType = 'fram_name'; sortReverse = !sortReverse">Frame
<span class="dropup">
<span ng-show="sortType == 'frame_name' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'frame_name' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text" style="width: 100px">
<a href="#" ng-click="sortType = 'lpar_name'; sortReverse = !sortReverse">Lpar
<span class="dropup">
<span ng-show="sortType == 'lpar_name' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'lpar_name' && sortReverse" class="caret"> </span>
</a>
</th>
<th class="table-title-text" style="width: 100px">
<a href="#" ng-click="sortType = 'lpar_hmc_name'; sortReverse = !sortReverse">Lpar HMC
<span class="dropup">
<span ng-show="sortType == 'lpar_hmc_name' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'lpar_hmc_name' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text" style="width: 100px">
<a href="#" ng-click="sortType = 'lpar_id'; sortReverse = !sortReverse">Lpar Id
<span class="dropup">
<span ng-show="sortType == 'lpar_id' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'lpar_id' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text" style="width: 100px">
<a href="#" ng-click="sortType = 'state'; sortReverse = !sortReverse">State
<span class="dropup">
<span ng-show="sortType == 'state' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'state' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'os_version'; sortReverse = !sortReverse">OSV
<span class="dropup">
<span ng-show="sortType == 'os_version' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'os_version' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'logical_serial_number'; sortReverse = !sortReverse">LSR
<span class="dropup">
<span ng-show="sortType == 'logical_serial_number' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'logical_serial_number' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'lpar_env'; sortReverse = !sortReverse">Lpar env
<span class="dropup">
<span ng-show="sortType == 'lpar_env' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'lpar_env' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_min_procs'; sortReverse = !sortReverse">Curr Min Procs
<span class="dropup">
<span ng-show="sortType == 'curr_min_procs' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_min_procs' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_procs'; sortReverse = !sortReverse">Curr Procs
<span class="dropup">
<span ng-show="sortType == 'curr_procs' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_procs' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_max_procs'; sortReverse = !sortReverse">Curr Max Procs
<span class="dropup">
<span ng-show="sortType == 'curr_max_procs' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_max_procs' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_min_proc_units'; sortReverse = !sortReverse">Curr Min Proc Units
<span class="dropup">
<span ng-show="sortType == 'curr_min_proc_units' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_min_proc_units' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_proc_units'; sortReverse = !sortReverse">Curr Proc Units
<span class="dropup">
<span ng-show="sortType == 'curr_proc_units' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_proc_units' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_max_proc_units'; sortReverse = !sortReverse">Curr Max Proc Units
<span class="dropup">
<span ng-show="sortType == 'curr_max_proc_units' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_max_proc_units' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_min_memory'; sortReverse = !sortReverse">Curr Min Memory
<span class="dropup">
<span ng-show="sortType == 'curr_min_memory' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_min_memory' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_memory'; sortReverse = !sortReverse">Curr Memory
<span class="dropup">
<span ng-show="sortType == 'curr_memory' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_memory' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_max_memory'; sortReverse = !sortReverse">Curr Max Memory
<span class="dropup">
<span ng-show="sortType == 'curr_max_memory' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_max_memory' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'capped_mode'; sortReverse = !sortReverse">Capped Mode
<span class="dropup">
<span ng-show="sortType == 'capped_mode' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'capped_mode' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'curr_uncap_weight'; sortReverse = !sortReverse">Curr Uncap Weight
<span class="dropup">
<span ng-show="sortType == 'curr_uncap_weight' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'curr_uncap_weight' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'lpar_status_flag'; sortReverse = !sortReverse">Lpar Status Flag
<span class="dropup">
<span ng-show="sortType == 'lpar_status_flag' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'lpar_status_flag' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'hmc_updt_by'; sortReverse = !sortReverse">HMC Updt By
<span class="dropup">
<span ng-show="sortType == 'hmc_updt_by' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'hmc_updt_by' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'hmc_updt_date'; sortReverse = !sortReverse">HMC Updt Date
<span class="dropup">
<span ng-show="sortType == 'hmc_updt_date' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'hmc_updt_date' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'lpar_name'; sortReverse = !sortReverse">Lpar Name
<span class="dropup">
<span ng-show="sortType == 'lpar_name' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'lpar_name' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'earmark_procs'; sortReverse = !sortReverse">Earmark Procs
<span class="dropup">
<span ng-show="sortType == 'earmark_procs' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'earmark_procs' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'earmark_proc_units'; sortReverse = !sortReverse">Earmark Proc Units
<span class="dropup">
<span ng-show="sortType == 'earmark_proc_units' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'earmark_proc_units' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'earmark_memory'; sortReverse = !sortReverse">Earmark Memory
<span class="dropup">
<span ng-show="sortType == 'earmark_memory' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'earmark_memory' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'security_zone'; sortReverse = !sortReverse">Security Zone
<span class="dropup">
<span ng-show="sortType == 'security_zone' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'security_zone' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'ip_addr'; sortReverse = !sortReverse">IP Addr
<span class="dropup">
<span ng-show="sortType == 'ip_addr' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'ip_addr' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'application'; sortReverse = !sortReverse">Application
<span class="dropup">
<span ng-show="sortType == 'application' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'application' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'server_farm'; sortReverse = !sortReverse">Server Farm
<span class="dropup">
<span ng-show="sortType == 'server_farm' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'server_farm' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'uaid'; sortReverse = !sortReverse">UAID
<span class="dropup">
<span ng-show="sortType == 'uaid' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'uaid' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'failover'; sortReverse = !sortReverse">Failover
<span class="dropup">
<span ng-show="sortType == 'failover' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'failover' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'vip_name'; sortReverse = !sortReverse">VIP Name
<span class="dropup">
<span ng-show="sortType == 'vip_name' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'vip_name' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'lpar_gen_earmark'; sortReverse = !sortReverse">Lpar Gen Earmark
<span class="dropup">
<span ng-show="sortType == 'lpar_gen_earmark' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'lpar_gen_earmark' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'lpar_gen_decom_flag'; sortReverse = !sortReverse">Lpar Gen Decom Flag
<span class="dropup">
<span ng-show="sortType == 'lpar_gen_decom_flag' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'lpar_gen_decom_flag' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text">
<a href="#" ng-click="sortType = 'gen_updt_by'; sortReverse = !sortReverse">Gen Updt By
<span class="dropup">
<span ng-show="sortType == 'gen_updt_by' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'gen_updt_by' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text" style="width: 100px">
<a href="#" ng-click="sortType = 'gen_updt_date'; sortReverse = !sortReverse">Gen Updt Date
<span class="dropup">
<span ng-show="sortType == 'gen_updt_date' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'gen_updt_date' && sortReverse" class="caret"></span>
</a>
</th>
<th class="table-title-text" style="width: 100px">
<a href="#" ng-click="sortType = 'notes'; sortReverse = !sortReverse">Notes
<span class="dropup">
<span ng-show="sortType == 'notes' && !sortReverse" class="caret"></span>
</span>
<span ng-show="sortType == 'notes' && sortReverse" class="caret"></span>
</a>
</th>
</tr>
</thead>
<section class="">
<tbody>
<tr ng-repeat="lparReport in main_data_table.message | orderBy:sortType:sortReverse | filter:searchText" >
<td class="table-row-text">{{ lparReport.frame_name }}</td>
<td class="table-row-text">{{ lparReport.lpar_name }}</td>
<td class="table-row-text">{{ lparReport.lpar_hmc_name }}</td>
<td class="table-row-text">{{ lparReport.lpar_id }}</td>
<td class="table-row-text">{{ lparReport.state }}</td>
<td class="table-row-text">{{ lparReport.os_version }}</td>
<td class="table-row-text">{{ lparReport.logical_serial_number }}</td>
<td class="table-row-text">{{ lparReport.lpar_env }}</td>
<td class="table-row-text">{{ lparReport.curr_min_procs}}</td>
<td class="table-row-text">{{ lparReport.curr_procs}}</td>
<td class="table-row-text">{{ lparReport.curr_max_procs}}</td>
<td class="table-row-text">{{ lparReport.curr_min_proc_units}}</td>
<td class="table-row-text">{{ lparReport.curr_proc_units}}</td>
<td class="table-row-text">{{ lparReport.curr_max_proc_units}}</td>
<td class="table-row-text">{{ lparReport.curr_min_memory}}</td>
<td class="table-row-text">{{ lparReport.curr_memory}}</td>
<td class="table-row-text">{{ lparReport.curr_max_memory}}</td>
<td class="table-row-text">{{ lparReport.capped_mode}}</td>
<td class="table-row-text">{{ lparReport.curr_uncap_weight}}</td>
<td class="table-row-text">{{ lparReport.lpar_status_flag}}</td>
<td class="table-row-text">{{ lparReport.hmc_updt_by}}</td>
<td class="table-row-text">{{ lparReport.hmc_updt_date}}</td>
<td class="table-row-text">{{ lparReport.l_name}}</td>
<td class="table-row-text">{{ lparReport.earmark_procs}}</td>
<td class="table-row-text">{{ lparReport.earmark_proc_units}}</td>
<td class="table-row-text">{{ lparReport.earmark_memory}}</td>
<td class="table-row-text">{{ lparReport.security_zone}}</td>
<td class="table-row-text">{{ lparReport.ip_addr}}</td>
<td class="table-row-text">{{ lparReport.application}}</td>
<td class="table-row-text">{{ lparReport.server_farm}}</td>
<td class="table-row-text">{{ lparReport.uaid}}</td>
<td class="table-row-text">{{ lparReport.failover}}</td>
<td class="table-row-text">{{ lparReport.vip_name}}</td>
<td class="table-row-text">{{ lparReport.vip}}</td>
<td class="table-row-text">{{ lparReport.lpar_gen_earmark}}</td>
<td class="table-row-text">{{ lparReport.lpar_gen_decom_flag}}</td>
<td class="table-row-text">{{ lparReport.gen_updt_by}}</td>
<td class="table-row-text">{{ lparReport.gen_updt_date}}</td>
<td class="table-row-text">{{ lparReport.notes}}</td>
</tr>
</tbody>
</section>
</table>
</div>
这是我的css -
.hmcdata {
margin: 25px 10px 0 0;
border-radius: 6px;
border: 1px solid #c1bfbf;
padding: 0px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgb(24, 101,
139);
}
.hmcdata td {
border-right: 1px dashed #efefef;
border-bottom: 1px solid #efefef;
}
.fixed-table {
height: 500px;
}
.table-title-text {
align-content: center;
text-align: center;
font-size: 8pt;
}
.table-row-text {
align-content: center;
text-align: center;
font-size: 8pt;
}
table.table.table-striped {
border:2px solid #efefef;
}
1 个答案:
答案 0 :(得分：0)
首先，我在你的结构中发现的故障是你有不同数量的头部柱（38）和体柱（39）。
1）给予colspan
因此，您需要对它们进行均衡，或者使用colspan对任何（或需要它）使用值= 2。
2）显示thead和tbody
继续前进，您需要检查thead和tbody是否具有默认display属性，而不是display: block
thead应该有display: table-header-group;
tbody应该有display: table-row-group;
如果这样可以解决您的问题，那可能是因为table的标题和正文无法与widths进行同步，并且表现得非常独立。
现在最后你需要将你的表格绑定到一些特定的max-width:500px以及width:100%（使其成为响应）和overflow: auto;，这样如果它超出你的滚动条的宽度。
我希望这可以帮助你。
谢谢！
-divy3993
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？