Question

我正在构建一个由<table>组成的HTML视图，每个单元格只包含一个<ul>元素，其可变数量为<li>。出于可读性原因，我的行有一个min-width: 100px;，但根据<ul>的内容展开。但在其他单元格中（<li>的数量较少）。我希望<ul>使用100％的单元格高度。目前，他们保持100px的高度，并且是垂直居中的。

我的观点可以概括为：

<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>之间下降，但他们没有调整大小的事实使得在一个空列表中有点危险，因为你没有＆＃34;看到＆＃34;他们，不得不猜测他们在哪里。如果他们使用完整的单元尺寸，那将会容易得多。

我使用开发人员工具做了很多尝试，但找不到CSS和Javascript的正确组合。

技术先决条件：

Javascript DOM操作没关系，我已经这样做了来调整我的表格。我使用ExtJS，但我可以移植jQuery或纯JS代码。
与IE8的兼容性是必须的（75％的最终用户在IE上。必须热爱企业界......）

感谢您的任何建议！

编辑：这里有Fiddle代表我的代码尽可能接近（NDA阻止我分享原始代码）

Answer 1

您可以使用td自己绘制边框：http://jsfiddle.net/P5h8d/2/

table {
    width: 100%;
    background:black;
    border-spacing:1px;
}

tr {
    min-height: 50px;
    width: 100%;
}

tbody th, tbody td {
    border: 3px dotted red;
}
 th, td {
    width: 20%;
    background:white;
}

如果符合以下条件，您可能不需要表格。

您使用display:table代替<table>将<ul>视觉转换为单元格。

<强> DEMO

<section>
      <div>
        <ul>
          <li> itelm</li>...
        </ul>
        <ul>
          <li> itelm</li>...
        </ul>
        <ul>
          <li> itelm</li>...
        </ul>
      </div>
      <div>
        <ul>
          <li> itelm</li>...
        </ul>
        <ul>
          <li> itelm</li>...
        </ul>
        <ul>
          <li> itelm</li>...
        </ul>
      </div>
    </section>

CSS

section {
  display:table;
  border-spacing:5px;
}
section > div {
  display:table-row;
}
section>div>ul {
  display:table-cell;
  background:red;
  min-width:100px;
}

你使用display：flex;

<强> DEMO

使用的基本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*/
}

Answer 2

要使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

Answer 3

不要污染我的第一个答案，在这里添加拖放js

无论ul的高度如何，li都会落入！

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

<强> DEMO

使用的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));}

调整表格单元格中的<ul> </ul>

3 个答案: