是否可能通过编程将基于CSS的div布局转换为表格布局？

Question

我们请了一位自由设计师使用HTML和CSS（基于div）为我们构建了一个非常棒的内部Web应用程序。然而，在我们的内部系统中，我们有一个遗留系统，它在渲染此应用程序时存在问题，需要表格布局结构并进行适当的样式设置才能正常工作。

由于页面数量众多，我们无法手动转换。

因此，我将尝试以编程方式解决此问题。在开始之前，这种方法可行吗？有什么需要考虑的因素吗？也许已经有人做过类似的事情？

我将使用PHP及其DOM文档类 - 这是个好主意吗？

我真的需要在这方面得到帮助，因为我们可能已经在这个项目上浪费了很多时间和金钱。

- Mia

---

老实说，这听起来像是一场噩梦。如果数据非常好且结构一致，你可能有机会。如果你想使用PHP，请查看php.net/dom。 - Ross

将Div转换为表格布局不是一个好主意。也许您可以添加一些关于“遗留系统CSS问题”的信息，有很多优秀的CSS设计师，也许他们知道解决方案。 - powtac

我将会遇到有关浮点数、边距和填充的问题。但似乎这可以通过表格布局来解决？ - Mia

Answer 1

通过编程的方式可能会有可能适应特定情况，例如从页面中提取数据并将其插入到不同的模板中。

但是，你不能为一般情况编写代码。CSS 的工作方式与上个千年的表格布局完全不同。

我建议改善过时的渲染器。

- Quentin

---

这个传统系统的开发人员说它现在能够正常工作，而我提供的HTML/CSS是问题所在。:( 天啊。公平地说，更改渲染引擎比我手动更改HTML/CSS更困难。但那也是一项艰巨的工作。 - Mia

Answer 2

如果基于div的HTML是合理生成的，并且遵循类似表格的布局，就像这样：

<div class="table">
    <div class="row>
        <div class="cell">...</div>
        <div class="cell">...</div>
    </div>
</div>

然后使用一些DOM操作将个别单元格转换为其直接基于表格的等效项并不是太难。但是，如果HTML代码混乱，逻辑顺序不当等等，则需要修改代码从一开始就输出表格。

- Marc B

---

HTML非常干净且结构良好。我现在只是在想，一个表格布局是否能够模仿div支持的所有CSS样式呢？ - Mia

表格实际上比纯CSS更容易用于布局，但由于语义原因，这样做已经被弃用。我能想到的就是你无法浮动单元格，但另一方面，你可以获得立即的垂直对齐控制，以及简单的列/行跨度控制。 - Marc B

Answer 3

你的新网站是否可以简单地用表格包装而不是完全重写以在各处使用表格？如果表格是您网站的宽度，只需将整个现有HTML放入单个表格单元格中。

如果无法实现上述方法，将新网站放入iframe中也不会太难（不应该），尽管您可能需要一些跨框架通信来动态调整基于内容的iframe高度（以避免页面内出现滚动条）。

我必须同意其他人的看法-从语义到表格混乱的程序转换代码至少会带来巨大问题，并且最多只能部分成功。最快的方法可能是手动完成。

- rust