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



是否可以使用 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>

谢谢

您只能使用 css 执行此操作 - 通过将显示类型更改为 tabletable-rowtable-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 结构在语义上保持正确(因为它看起来不像数据是表格 - 因此您不应该使用表标记(

最新更新