javascript - 调整表格单元格中 的大小

Question

我正在构建一个由 <table> 组成的 HTML View , 每个单元格只包含一个 <ul>元素，可变数量为 <li> .出于可读性原因，我的行有一个 min-width: 100px; , 但根据 <ul> 的内容展开.但在其他单元格中(<li> 的数量较少)。我想要我的 <ul>使用 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>

我这样做的原因是，每个 <li>可以在每个 <ul> 之间拖放，但事实上它们并没有调整大小，这使得在一个空列表上掉落有点危险，因为你没有“看到”它们，而不得不猜测它们在哪里。如果他们使用完整的单元维度，会容易得多。

我已经使用开发工具进行了很多尝试，但找不到 CSS 和 Javascript 的正确组合。

技术先决条件:

• Javascript DOM 操作没问题，我已经用它来调整表格大小了。我使用 ExtJS，但我可以移植 jQuery 或纯 JS 代码。
• 必须与 IE8 兼容(75% 的最终用户都在使用 IE。一定要热爱企业界...)

谢谢你的建议!

编辑:这是一个Fiddle尽可能接近地代表我的代码(NDA 阻止我共享原始代码)

Answer 1

要使 height: 100% 正常工作，容器必须设置其 height。我在下面有一个解决方案，它使用 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';
        }
    }
}

高度上的 - 12 用于填充和边框。 JSFiddle .