4

是的，这是另一个关于div内部良好td但没有脚本的问题。

td的宽度以像素为单位定义。

我想要一个div（及其内部输入）填充整个td. 我让它在 Chrome 中工作，但在 Firefox 和 IE9 中失败了。那里一团糟。（我不关心IE6-8）

这是我正在测试的片段：http: //jsfiddle.net/K5D9z/37/。有没有通用的解决方案？

编辑

虽然我之前没有指定，但我希望某些表格单元格的内容会增加高度并扩展一些行。在 IE 和 FFheight: 100%中，元素将始终在 css 中指定容器的初始高度：http: //jsfiddle.net/K5D9z/51/。所有的答案都有这个问题。

更新

正如评论中所指出的，似乎没有纯 css 解决方案。所以我根据计算的高度在style每个属性中使用脚本设置高度：http: //jsfiddle.net/K5D9z/54/。td

4

2 回答 2

1

您需要position:absolute从.test-cell div, .test-cell input. 这会导致input从正常的内容流中删除，因此它不会保留在td应有的位置。这以及更改height和width从auto到100%应该为您提供您正在寻找的解决方案。

.test-cell div, .test-cell input{
  display: block;
  /* position: absolute; Don't use this style */
  height:100%;
  width: 100%;
  /* Don't need these, because it goes along with position absolute
     top:0;
     left:0;
     bottom:0;
     right:0;
  */
  background-color: green;
}

小提琴

于 2012-12-27T02:12:50.070 回答
1

像这样的东西怎么样：

CSS：

table
{
    border-collapse:collapse;
}

td
{
    padding:0;
    border: 1px Solid gray;
    height: 120px;
    width: 100px;
}

.test-row 
{
    background-color: red;
}

.test-cell div, .test-cell input
{
    height:100%;
    width:auto;
    background-color: green;
}

​ 演示：http: //jsfiddle.net/K5D9z/47/

于 2012-12-25T21:21:58.353 回答