html - 如何在html页面的div表中保持正确对齐？

Question

Link for the table我正在尝试使用带有以下代码的 div 创建一个表。

我需要使表格与行和列正确对齐。

下面是CSS

.Table {
  display: table;
}

.Title {
  display: table-caption;
  text-align: center;
  font-weight: bold;
  font-size: larger;
}

.Heading {
  display: table-row;
  font-weight: bold;
  text-align: center;
}

.Row {
  display: table-row;
}

.Cell {
  display: table-cell;
  border: solid;
  border-width: thin;
  padding-left: 25px;
  padding-right: 20px;
  text-align: center;
}

<div class="Heading">

  <div Class="Cell">
    <p>PROJECT</p>
  </div>
  <div Class="Cell">
    <p>APPLICATION</p>
  </div>
  <div id="test">
    <span id="headerID1" class="Cell">
            <p>PRIMARY</p>
        </span>
    <span id="headerID2" class="cell">
            <p>DISASTER</p>
        </span>
    <span id="Time" class="Cell">   
            <P> LAST CHECKED TIME</P>                
         </span>

  </div>

</div>


<div class="Heading">
  <div Class="Cell">
    <p>GRABCDH</p>
  </div>
  <div Class="Cell">
    <p>abc.com</p>
  </div>
  <div id="test">
    <span id="PABC.th" class="Cell">
                <p>ABCD</p>
            </span>
    <span id="DABC.th" class="cell">
                <p>BCDE</p>
            </span>
    <span id="EABC.th" class="Cell">   
                <P> </P>                
             </span>
  </div>

</div>

<div class="Heading">
  <div Class="Cell">
    <p>LEABCDE</p>
  </div>
  <div Class="Cell">
    <p>bcd.com</p>
  </div>
  <div id="test">
    <span id="Pdet.in" class="Cell">
                <p>HDCF</p>
            </span>
    <span id="Dladt.in" class="cell">
                <p>TDCP</p>
            </span>
    <span id="lADV.in" class="Cell">   
                <P> </P>                
             </span>
  </div>

</div>
<div class="Heading">
  <div Class="Cell">
    <p>LABCD</p>
  </div>
  <div Class="Cell">
    <p>CDE.COM/p>
  </div>
  <div id="test">
    <span id="PCDE" class="Cell">
                <p>SBCD</p>
            </span>
    <span id="DABC.in" class="cell">
                <p>HABCD</p>
            </span>
    <span id="EABC.in" class="Cell">   
                <P> </P>                
             </span>
  </div>

</div>
<div class="Heading">
  <div Class="Cell">
    <p>LDXY</p>
  </div>
  <div Class="Cell">
    <p>BCD.IN</p>
  </div>
  <div id="test">
    <span id="PDER.int" class="Cell">
                <p>HDC2</p>
            </span>
    <span id="DlyD.int" class="cell">
                <p>PLAN3</p>
            </span>
    <span id="lynCD.int" class="Cell">   
                <P> </P>                
             </span>
  </div>

</div>

但是对齐方式看起来不正确。请让我知道如何使这种对齐正确？如上面的链接所示，单元格和行的对齐方式会根据内部文本进行更改

Answer 1

您需要一个公共(public)包装器，您可以从中设置 table-layout ，然后每个子级别都会收到正确的 display 它应该做什么。

如何开始的示例。

.tableLayout {
  display:table;
}
.tableLayout > div{
  display:table-row;
}
.tableLayout > div > div {
  display:table-cell;
  border:solid;
}

<div class="tableLayout">
  <div class="Heading">
    <div Class="Cell">
      <p>PROJECT</p>
    </div>
    <div Class="Cell">
      <p>APPLICATION</p>
    </div>
    <div id="test">
      <span id="headerID1" class="Cell">
            <p>PRIMARY</p>
        </span>
      <span id="headerID2" class="cell">
            <p>DISASTER</p>
        </span>
      <span id="Time" class="Cell">   
            <P> LAST CHECKED TIME</P>                
         </span>
    </div>
  </div>
  <div class="Heading">
    <div Class="Cell">
      <p>GRABCDH</p>
    </div>
    <div Class="Cell">
      <p>abc.com</p>
    </div>
    <div id="test">
      <span id="PABC.th" class="Cell">
                <p>ABCD</p>
            </span>
      <span id="DABC.th" class="cell">
                <p>BCDE</p>
            </span>
      <span id="EABC.th" class="Cell">   
                <P> </P>                
             </span>
    </div>
  </div>
  <div class="Heading">
    <div Class="Cell">
      <p>LEABCDE</p>
    </div>
    <div Class="Cell">
      <p>bcd.com</p>
    </div>
    <div id="test">
      <span id="Pdet.in" class="Cell">
                <p>HDCF</p>
            </span>
      <span id="Dladt.in" class="cell">
                <p>TDCP</p>
            </span>
      <span id="lADV.in" class="Cell">   
                <P> </P>                
             </span>
    </div>
  </div>
  <div class="Heading">
    <div Class="Cell">
      <p>LABCD</p>
    </div>
    <div Class="Cell">
      <p>CDE.COM/p>
    </div>
    <div id="test">
      <span id="PCDE" class="Cell">
                <p>SBCD</p>
            </span>
      <span id="DABC.in" class="cell">
                <p>HABCD</p>
            </span>
      <span id="EABC.in" class="Cell">   
                <P> </P>                
             </span>
    </div>
  </div>
  <div class="Heading">
    <div Class="Cell">
      <p>LDXY</p>
    </div>
    <div Class="Cell">
      <p>BCD.IN</p>
    </div>
    <div id="test">
      <span id="PDER.int" class="Cell">
                <p>HDC2</p>
            </span>
      <span id="DlyD.int" class="cell">
                <p>PLAN3</p>
            </span>
      <span id="lynCD.int" class="Cell">   
                <P> </P>                
             </span>
    </div>
  </div>
</div>

注意:rowspan 或 colspan 属性在 CSS 中没有等效项，如果您希望某些单元格跨越列或行，display:grid就可以了，如果是请说明。