表格单元格中的绝对格式 [英] div style absolute in a table cell

问题描述

我有一个位置绝对和宽度为div的div：表格单元格内的100％，宽度计算为窗口宽度而不是表格单元格宽度。表格单元格宽度也是可变的，所以我需要绝对div的宽度与表格单元格宽度相同。我怎么做到这一点？

解决方案

这是我得到这个工作的方式：

 < table border =1class ='rel'> 
< tr> 
< td>< div class ='abs'> row 1，cell 1< / div>< / td> 
< td>第1行，第2单元< / td> 
< / tr> 
< tr> 
< td>第2行，第1单元< / td> 
< td>第2行，第2单元< / td> 
< / tr> 
< / table> 
 
 * {margin：0;填充：0; } 
 
 .rel {
 position：relative; 
} 
 
 .abs {
 position：absolute; 
背景颜色：红色; 
 top：1px; / *由于表格边界的偏移* / 
 left：1px; 
} 
  

注意，相对样式不适用于tr或td。当我将它应用到td（我预期会有必要）时，它在Chrome中无法使用。这里有一个jsFiddle供你玩：

http ：//jsfiddle.net/bNweT/1/

希望这会有所帮助。

Bob

i have a div with position absolute and width:100% inside a table cell and the width is calculated to window width not to table cell width. the table cell width is also variable so i need that the width of absolute div to be the same as table cell width. how can i do that?

解决方案

This is the way I got this to work:

<table border="1" class='rel'>
    <tr>
        <td><div class='abs'>row 1, cell 1</div></td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

* { margin: 0; padding: 0; }

.rel { 
    position: relative; 
}

.abs { 
    position: absolute;
    background-color: red;
    top: 1px;  /* offset because of table border */
    left: 1px;
}

Notice the relative style is applied to the table not the tr or td. When I applied it to the td (what i expected was going to be necessary) it did not work in Chrome. Here is a jsFiddle for you to play with:

http://jsfiddle.net/bNweT/1/

Hope this helps.

Bob

这篇关于表格单元格中的绝对格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！