Question

我布置了桌子，就像我希望它使用colspans和rowpans看起来一样。但是，我被告知，我需要使用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>

Answer 1

您可以为此目的引导网格系统，这里是grid system的所有文档

这是它的基本示例。您不必编写额外的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>

结合div？

1 个答案: