将引导网格 div 转换为表 tr td

Question

是否可以使用 PHP 或 JQuery 将 div row and col 转换为 table tr td 格式？

我一直在做一些谷歌搜索，但所有结果都是相反的。表到分区。

我无法想象用一个简单的 str_replace 来做到这一点，因为你无法真正知道一行或一列的结束 div。所以我希望你能引导我走上正确的道路。

HTML：

<section>
    <div class="row">
        <div class="col-sm-6" data-type="container-content">
            <section data-type="component-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
            </section>
        </div>
        <div class="col-sm-6" data-type="container-content">
            <section data-type="component-text"><h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
            </section>
        </div>
    </div>
</section>
<section>
        <div class="row">
            <div class="col-sm-6" data-type="container-content">
                <section data-type="component-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
                </section>
            </div>
            <div class="col-sm-6" data-type="container-content">
                <section data-type="component-text"><h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
                </section>
            </div>
        </div>
    </section>

到表：

<table>
    <tr>
        <td>
            <section data-type="component-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
            </section>
        </td>
        <td>
            <section data-type="component-text"><h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
            </section>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <section data-type="component-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
            </section>
        </td>
        <td>
            <section data-type="component-text"><h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
            </section>
        </td>
    </tr>
</table>

谢谢

Answer 1

您可以仅使用 css 来实现 - 通过将 display 类型更改为 table、table-row 和 table-cell：

.table {
  display: table;
  width: 100%;
}

.table > .row {
  display: table-row;
}

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

<section class="table">
  <div class="row">
    <div class="col-sm-6" data-type="container-content">
      <section data-type="component-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
      </section>
    </div>
    <div class="col-sm-6" data-type="container-content">
      <section data-type="component-text">
        <h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
      </section>
    </div>
  </div>
</section>
<section class="table">
  <div class="row">
    <div class="col-sm-6" data-type="container-content">
      <section data-type="component-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
      </section>
    </div>
    <div class="col-sm-6" data-type="container-content">
      <section data-type="component-text">
        <h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
      </section>
    </div>
  </div>
</section>

在上面的示例中，我在您的顶级部分添加了一个表格类，以便将它们与其他部分区分开来。

它还能让你的 html 结构在语义上保持正确（因为它看起来不像数据是表格的 - 因此你不应该使用表格标签）