Javascript 调整an的大小<；ul>；在表格单元格中

我正在构建一个HTML视图，其中包含一个

，每个单元格只包含一个

元素，元素的数量可变。出于可读性原因，我的行的最小宽度为100px，但根据

的内容展开。但在其他单元格中（其数量较少）。我希望我的

使用单元格100%的高度。目前，它们保持100像素的高度，垂直居中

我的观点可以总结为：

<table>
    <tr>
        <td>
            <ul>...</ul>
        </td>
        <td>
            <ul>...</ul>
        </td>
        <td>
            <ul>...</ul>
        </td>
    </tr>
    <tr>
        <td>
            <ul>...</ul>
        </td>
        <td>
            <ul>...</ul>
        </td>
        <td>
            <ul>...</ul>
        </td>
    </tr>
</table>

…
…
…
…
…
…

我这样做的原因是，每个

都可以在每个

之间拖放，但它们没有调整大小这一事实使得将其拖放到空列表中有点危险，因为您无法“看到”它们，并且必须猜测它们在哪里。如果他们使用完整的单元格尺寸，这会容易得多

我使用开发工具做了很多尝试，但是没有找到CSS和Javascript的正确组合

技术先决条件：

• JavaScriptDOM操作还可以，我已经在调整表的大小了。我使用ExtJS，但移植jQuery或纯JS代码没问题
• 必须与IE8兼容（75%的最终用户使用IE。必须热爱企业界…）

谢谢你的建议

---

编辑：这里有一个尽可能接近我的代码（NDA阻止我共享原始代码）

您可以使用td自己绘制边界：

---

在以下情况下，您可能不需要表格：

---

您可以使用

display:table

而不是

将

可视化地转换为单元格

---

---

使用display:flex

---

使用的基本CSS：

tr {
  display:flex;/* reset display:defaut*/
}
td {background:gray;
display:flex;/* here again display reset */
flex-direction:column;/* make sure we draw content from top to bottom */
  margin:2px;
}
ul {
  padding:0;
  margin:5px;;
  min-width:100px;
  background:red;
  flex:1;/* fills or shares whole height of its flex box*/
}

---

要使

高度：100%

按预期工作，容器必须设置其

高度。下面我有一个解决方案，它使用JavaScript设置所有ul的高度，如果需要，它可以作为一个函数在每次更改时运行：

function fixDimensions() {
    var table = document.getElementById('table');
    var trs = table.getElementsByTagName('tr');
    for(var i = 0; i < trs.length; i++){
        var tds = trs[i].getElementsByTagName('td');
        for(var g = 0; g < tds.length; g++){
            var ul = tds[g].getElementsByTagName('ul')[0];
            ul.style.height = (tds[g].clientHeight - 12) + 'px';
        }
    }
}

函数fixDimensions（）{
var table=document.getElementById（'table'）；
var trs=table.getElementsByTagName（'tr'）；
对于（变量i=0；i

高度上的
-12
用于填充和边框
 为了不污染我的第一个答案，在这里添加了拖放js

无论
ul
的高度如何，
li
都会下降


下面是一个CSS方法来扩展元素周围的区域，以增加它可以捕获鼠标事件的区域。
IE8理解
:before
/
:after
，所以我们使用它们。并将它们设置在
ul
顶部和底部的绝对位置



使用的CSS：

td {overflow:hidden;/*keep ul:pseudos inside */}
ul {
    position:relative;
}
ul:before,
ul:after {
    content:'';
    position:absolute;
    height:200px;/* whatever you need or think it is safe */
    left:0;
    width:100%;
}
ul:before {
    bottom:100%;
}
ul:after {
    top:100%;

}

添加到演示基本HTML5拖放（属性和js），因为它在您的小提琴中丢失

function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}

你能用你已经拥有的设置一个JSFIDLE吗？刚刚编辑了我的帖子！我不知道“flex”显示模式，但在谷歌上快速搜索后，它听起来很神奇。但它只适用于从v10开始的IE（即使是部分支持），正如我在OP中所说的，我需要保持IE8与IE8的兼容性，删除表格，将容器中的uls设置为display:table或table row，并将它们用作cells:display:table cell。IE8会让itI考虑到这一点，但是遍历一个表的DOM树比遍历一组div要容易得多。而且更容易建造。另外，我的模板已经100%使用了所有功能，这是唯一剩下的“bug”。我真的不想把整个东西拆下来从头开始重建这是一个想法，如果你从php例程生成它，你没有太多的事情要做更新，否则任何编辑器都有searc和replace函数：）我个人喜欢这个想法，但是我认为我的老板不会喜欢我花时间重建所有的模板来进行“装饰性”的改进。我曾考虑过使用JS来调整它们的大小，但我想把它作为最后的手段，因为渲染本身会在IE8上触发“脚本太长”弹出窗口。我会等几天，如果noone提供了一个纯CSS解决方案，我会这样做。将删除目标设置为
，然后将其附加到
是更好的选择吗？不过仍然使用JS。不管是
td
还是
ul
中的哪一个是删除目标，但是如果是
ul
，它会更简单，因为它为我节省了查找它的DOM查询，这可能比我的解决方案要好。我没有使用ExtJS的经验，尽管.ExtJS在这里基本上是不相关的。我只为那些可能了解它并提供定制解决方案的人提到过它，但它提供了诸如jQuery之类的DOM操作，以及丰富的界面构建。我这里的问题主要是关于HTML和CSS，尽管如果什么都没有出现，我可以用JS来解决
function fixDimensions() {
    var table = document.getElementById('table');
    var trs = table.getElementsByTagName('tr');
    for(var i = 0; i < trs.length; i++){
        var tds = trs[i].getElementsByTagName('td');
        for(var g = 0; g < tds.length; g++){
            var ul = tds[g].getElementsByTagName('ul')[0];
            ul.style.height = (tds[g].clientHeight - 12) + 'px';
        }
    }
}

td {overflow:hidden;/*keep ul:pseudos inside */}
ul {
    position:relative;
}
ul:before,
ul:after {
    content:'';
    position:absolute;
    height:200px;/* whatever you need or think it is safe */
    left:0;
    width:100%;
}
ul:before {
    bottom:100%;
}
ul:after {
    top:100%;

}

function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}