css - 合并div?
问题描述
我布置了我的表格,就像我希望它使用 colspans 和 rowspans 一样。但是,我被告知我需要使用 div 进行相同的布局,而我现在完全迷失了。我已经搜索过,但到目前为止我没有尝试过任何工作。我认为我可能遇到的问题是我需要合并或组合的 div 位于单独的包含 div 中。
这是td版本:
<link href="CSS/oneColFixCtrHdr.css" rel="stylesheet" type="text/css">
<table width="74%" height="143" class="OTIFheader">
<tbody>
<tr>
<td width="52" rowspan="3" align="center">Sourcing Manager</td>
<td width="46" rowspan="3" align="center">Supplier</td>
<td colspan="6" align="center">Fixture</td>
<td colspan="6" align="center">Pre-Con</td>
<td width="33" rowspan="2" align="center">Distro</td>
<td width="56" rowspan="2" align="center">Requests E-Fix</td>
<td width="55" rowspan="2" align="center">Replenish</td>
<td width="50" rowspan="2" align="center">FM/Parts</td>
<td width="48" rowspan="2" align="center">Supplies</td>
<td width="48" rowspan="2" align="center">Systems</td>
<td width="36" rowspan="2" align="center">Puerto Rico</td>
</tr>
<tr>
<td colspan="2" align="center">New Store</td>
<td colspan="2" align="center">Remodel</td>
<td colspan="2" align="center">Special Proj</td>
<td colspan="2" align="center">New Store</td>
<td colspan="2" align="center">Remodel</td>
<td colspan="2" align="center">Special Proj</td>
</tr>
<tr>
<td width="19" align="center">Int</td>
<td width="24" align="center">AO</td>
<td width="22" align="center">Int</td>
<td width="25" align="center">AO</td>
<td width="23" align="center">Int</td>
<td width="28" align="center">AO</td>
<td width="24" align="center">INT</td>
<td width="22" align="center">AO</td>
<td width="27" align="center">INT </td>
<td width="19" align="center">AO</td>
<td width="27" align="center">INT</td>
<td width="24" align="center">AO</td>
<td align="center">INT</td>
<td align="center">INT</td>
<td align="center">INT</td>
<td align="center">INT</td>
<td align="center">INT</td>
<td align="center">INT</td>
<td align="center">INT</td>
</tr>
</tbody>
</table>
这是 div 版本:
<div class="OTIFscrollingTableHeader" style="display:none">
<div class="gridHeader">
<div class="gridCell" style="width: 10%;"></div>
<div class="gridCell" style="width: 10%;"></div>
<div class="gridCell" style="width: 30%;">Fixture</div>
<div class="gridCell" style="width: 30%;">Pre-Con</div>
<div class="gridCell" style="width: 5%;">Distro</div>
<div class="gridCell" style="width: 5%;">Requests E-Fix</div>
<div class="gridCell" style="width: 5%;">Replenish</div>
<div class="gridCell" style="width: 5%;">FM/Parts</div>
<div class="gridCell" style="width: 5%;">Supplies</div>
<div class="gridCell" style="width: 5%;">Systems</div>
<div class="gridCell" style="width: 5%;">Puerto Rico</div>
</div>
<div class="gridHeader">
<div class="gridCell" style="width: 10%;"></div>
<div class="gridCell" style="width: 10%;"></div>
<div class="gridCell" style="width: 10%;">New Store</div>
<div class="gridCell" style="width: 10%;">Remodel</div>
<div class="gridCell" style="width: 10%;">Special Proj</div>
<div class="gridCell" style="width: 10%;">New Store</div>
<div class="gridCell" style="width: 10%;">Remodel</div>
<div class="gridCell" style="width: 10%;">Special Proj</div>
<div class="gridCell" style="width: 5%;"></div>
<div class="gridCell" style="width: 5%;"></div>
<div class="gridCell" style="width: 5%;"></div>
<div class="gridCell" style="width: 5%;"></div>
<div class="gridCell" style="width: 5%;"></div>
<div class="gridCell" style="width: 5%;"></div>
<div class="gridCell" style="width: 5%;"></div>
</div>
解决方案
您可以为此目的引导网格系统这里是网格系统的所有文档
这是它的基本示例。您不必编写额外的 CSS。这很容易和简单。
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
推荐阅读
- r - 具有严格参数的 R 函数
- greenplum - 为什么GPDB在成本估算中不考虑段数
- angular - auth0 auth0-spa-js 必须在安全的原始角度上运行
- php - 如何在两个日期之间验证房间的可用性?
- sql - Hibernate DLL 验证自定义 @ForeignKey 注释似乎失败了?
- windows - 如何使用 bash 脚本删除具有特定编号的图像?
- azure - 将 maxPollingInterval 设置得尽可能小有什么缺点?
- google-sheets - 隐藏和保护 Google 电子表格
- typescript - 键入一个类作为函数参数
- vb.net - 关闭应用程序时如何将文本保存在标签中?(VB.Net)