1

一連のdivとして実現されたHTMLテーブルがあります(スクロール可能なテーブルを作成するため)。

セルの 1 つ (div) で、他のセルと重なるポップアップを表示したいと考えています。

そのようです：

http://jsfiddle.net/pFx6m/

私のマークアップ:

<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">
        <div id="someBigContent"></div>  
        <div class="clearRight"></div></div>
    </div>

<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">

    </div>
</div>
<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">lilili</div>
</div>​

私のCSS：

.dataRow {
    height: 30px;    
    width:300px;
    max-height: 30px;
}

.dataRow > div {
    display: table-cell;
    height: 30px;
    z-index: 0;
    overflow:hidden;
}

.firstCell {
    width: 100px;
    height: 10px;
    background-color: blue;
}

.secondCell {
    width: 100px;
    height: 10px;
    background-color: red;
}

.thirdCell {
    width: 100px;
    height: 10px;
    background-color: yellow;
}

.clearRight {
    clear: right;
}

#someBigContent {
    height:100px;
    width:250px;
    background-color: #000;
    position: relative;
    top: 0px;
    left: -50px;
    float:right;

    z-index: 999;
}
​

今、私は何か間違ったことをしています. someBigContent(セル1と2)の左側のセルと重なっておらず、いくつかの行が想定よりも大きくなっています.

状況の概要については、このフィドルを参照してください。

どうすればセルをオーバーラップさせることができますか (テーブルだけでなく、その下にあるコンテンツも)。

4

2 に答える 2

1

divで作られたテーブルを見るのは非常に奇妙です...

しかし、CSSで追加してみてください

max-width: 100px !important;

発生するdiv/tableのことについては？

于 2012-08-07T13:14:40.537 に答える
1

そのCSSを使用すると、ブロック#someBigContentは行やセルのサイズに影響を与えません。

.dataRow {
    height: 30px;    
    width:300px;
    max-height: 30px;
}

.dataRow > div {
    display: relative;
    float: left;
    height: 30px;
    z-index: 0;
}

.firstCell {
    width: 100px;
    height: 10px;
    background-color: blue;
}

.secondCell {
    width: 100px;
    height: 10px;
    background-color: red;
}

.thirdCell {
    width: 100px;
    height: 10px;
    background-color: yellow;
}

.clearRight {
    clear: right;
}

#someBigContent {
    height:100px;
    width:250px;
    background-color: #000;
    position: absolute;
    top: 10px;
    left: 10px;        
    z-index: 999;
}

これで、親セルに対するこのブロックの位置を調整できます。

于 2012-08-07T15:13:09.267 に答える