Question

我在对接问题上有一个皇家的痛苦。我有一个页面布局，其中有两列到表。右列总是300px宽，但左列是填充容器中的剩余空间。这很容易，具体如下：

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td width='*'>
    </td>
    <td width='300'>
    </td>
  </tr>
</table>

现在，我希望左列包含一个应用了一些样式的div。在该样式中，有一个规则，div的宽度是300px。这对于RIGHT列很好，但我希望左列由div填充。我的直觉告诉我添加一个样式标签“width：inherit;”但这不起作用，它只是完全剥离宽度。我相信这是因为CSS不知道如何继承width =“*”。

那么，在左栏中设置这个div的最佳方法是什么，它填充了TD？任何宽度％值都是相对于页面而不是容器计算的。

我能想出的唯一解决方案（尚未完成此操作）是每当窗口绘制时使用CSS调整TD的大小，然后是div的样式：遗产会起作用，我相信。我真的不想这样做，因为我祈祷有一种CSS兼容的方式。

Answer 1

应该早点尝试一下。如果设置位置：relative;在它工作的div。自动将宽度设置为300px的css也设置position：absolute，不允许继承相对于TD。

Answer 2

我会在你的情况下提出一个jquery解决方案（如果可能的话）：

$(document).ready(function(){
     $("#td-style-of-your-naming-choice").resize(
          function(){$("#div-id").width($("#td-style-of-your-naming-choice").width();
     });
});

Answer 3

从你的问题我得到左div的宽度自动设置为300px（通过样式表或其他东西），你希望它是左列的宽度而不是300px。

我认为你应该尝试宽度：自动。 width：inherit可能用于获取未设置的父级（td）的宽度。默认情况下，div是块元素，因此将自动填充其父元素。默认的width属性是auto。

如果div绝对定位或div浮动，则不是这种情况。在这种情况下，您必须设置静态宽度。

Answer 4

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td>
        <div style="width:100%">123</div>
    </td>
    <td width='300'>
    </td>
  </tr>
</table>

和小提琴

http://jsfiddle.net/LMLbD/

Answer 5

以下在IE9中工作：

style="width:inherit; height:inherit; position:relative;"

如何在动态大小的表格单元格中创建div填充单元格

5 个答案: