使基于表格的布局可调整大小答案

【问题标题】：Making a table-based layout resizable使基于表格的布局可调整大小
【发布时间】：2017-01-18 02:25:03
【问题描述】：

我继承了一个具有类似桌面外观的 Web 应用程序。它使用表格进行布局。我需要使 GUI 的“面板”可调整大小（如拆分窗格）。

我需要完成的一个示例：http://demos.dojotoolkit.org/demos/mail/（可调整大小的内容区域）

但我需要使用非常复杂的嵌套表格，而不是使用 div 进行布局。有什么东西可以让我完成这个，还是我必须将代码转换为不使用表格进行布局？

【问题讨论】：

嵌套表...哎呀！嵌套的桌子会闯入你的房子，偷走你的电视，喝掉你所有的啤酒......
您是否尝试以 % 为单位设置 TD 的宽度？
@Mic 这是目前的方法，但我有一个功能请求，允许用户通过单击拖动拆分器手动调整面板大小。在深入研究并一劳永逸地摆脱布局表之前，这个问题确实是最后的尝试。
他们想用一个看起来像桌面应用程序的网络应用程序来打动谁？嗯？
“相当复杂的嵌套表格” - 听起来像恐怖电影的标题

标签： javascript html tablelayout resizable

【解决方案1】：

不过，我并不是要建议您使用表格布局。如果你能在这个乱七八糟的桌子开始惹你生气之前，借一些时间来保护自己。

这里是resizable tables 的示例。查看此页面的源代码，您将看到其中包含一个脚本：

<script type='text/javascript' src='resizable-tables.js'></script>

还有一个样式表：

<link rel='stylesheet' href='resizable.css' type='text/css' media='screen' />

还有 !doctype 定义的技巧，你也应该拥有它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- it is transitional only because of using width='xx%' property in table example -->
<html xmlns='http://www.w3.org/1999/xhtml'><head>

【讨论】：

【解决方案2】：

警告：我即将推荐一个第三方产品；如果这冒犯了您，请停止阅读。

如果您可以证明第三方软件的费用而不是您的时间，那么我会推荐 Telerik 的控件：它们有一个功能齐全的分离器。它对我来说非常有效。

DEMO

【讨论】：