Div覆蓋幾個表列

Question

我有一個表，我試圖從第二列的單元格的開頭到最後一列的單元格的末尾覆蓋每行div。

我可以將覆蓋寬度更改爲給定值，比如說，200px;但我最好能指定該寬度的值，以便div完美地「錨定」到單元格的末端。

HTML代碼：

<table style="width:200px; background:#eee;"> 
<tr> 
    <td>0</td> 
    <td class="event-container">C 
     <div class="event" style="background:red; width: 100%;">XXX-XXX</div> 
    </td> 
    <td>D</td> 
</tr> 
<tr> 
    <td>0</td> 
    <td class="event-container">E 
     <div class="event" style="background:blue; width: 200px;">XXX-XXX</div> 
    </td> 
    <td>F</td> 
</tr> 

CSS代碼：

tr { height: 25px; } 
.event-container { position: relative; } 
.event { position: absolute; } 
.event { top: 0px; left: 0px; z-index: 1000; } 
.event { height: 100%; opacity: 0.25 } 

看看下面的小提琴：

https://jsfiddle.net/rtubio/sohwqmzs/3/

有沒有什麼方法可以告訴HTML「跨div到單元格X的末尾」而不使用JavaScript？

Answer 1

試試這個，我已經使用jQuery的這個

$(document).ready(function(e) { 
 
    jQuery(".event-container").each(function(){ 
 
\t \t \t var w=jQuery(this).width(); 
 
\t \t \t jQuery(this).children("div.event").css("width", w); 
 
\t }); 
 
});

.event-container { position: relative; } 
 
.event { position: absolute; } 
 
.event { top: 0px; left: 0px; z-index: 1000; } 
 
.event { height: 100%; opacity: 0.25 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width:200px; background:#eee;"> 
 
<tr> 
 
    <td>0</td> 
 
    <td class="event-container">C 
 
     <div class="event" style="background:red; width: 100%;">XXX-XXX</div> 
 
    </td> 
 
    <td>D</td> 
 
</tr> 
 
<tr> 
 
    <td>0</td> 
 
    <td class="event-container">E 
 
     <div class="event" style="background:blue; width: 200px;">XXX-XXX</div> 
 
    </td> 
 
    <td>F</td> 
 
</tr> 
 
</table>

Answer 2

您可以嘗試下面這些行的演示。

我已經改變了你的div的span標記，並且還改變了事件類的CSS位置爲relative。

這可能會解決您的問題。

tr { 
 
    height: 25px; 
 
} 
 
.event-container { 
 
    position: relative; 
 
} 
 
.event { 
 
    position: relative; 
 
} 
 
.event { 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 1000; 
 
} 
 
.event { 
 
    height: 100%; 
 
    opacity: 0.25 
 
}

<table style="width:200px;background:#eee;"> 
 
    <tr> 
 
    <td>0</td> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    </tr> 
 
    <tr> 
 
    <td>0</td> 
 
    <td class="event-container">C 
 
     <span class="event" style="background:red;">XXX-XXX</span> 
 
    </td> 
 
    <td>D</td> 
 
    </tr> 
 
    <tr> 
 
    <td>0</td> 
 
    <td class="event-container">E 
 
     <span class="event" style="background:blue;">XXX-XXX</span> 
 
    </td> 
 
    <td>F</td> 
 
    </tr> 
 
</table>

Answer 3

我已經找到了以下解決方案，無需使用JavaScript在所有。該解決方案通過在要包裝的行內創建一個包含在div元素中的子表。這個「div」元素將是表格的容器，我可以放置另一個「div」覆蓋第一個。

HTML代碼：

<table style="width:200px;background:#eee;"> 
    <tr> 
     <td>0</td> 
     <td colspan="2"> 
      <div class="row-container"> 
       <table class="row-table"> 
        <tr> 
         <td style="background: green;"></td> 
         <td style="background: orange;"></td> 
        </tr> 
       </table> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td>0</td> 
     <td class="event-container">C 
      <div class="event" style="background:red; width: 100%;">XXX-XXX</div> 
     </td> 
     <td>D</td> 
    </tr> 
    <tr> 
     <td>0</td> 
     <td class="event-container">E 
      <div class="event" style="background:blue; width: 150px;">XXX-XXX</div> 
     </td> 
     <td>F</td> 
    </tr> 
    <tr> 
     <td>0</td> 
     <td colspan="2"> 
      <div class="row-container"> 
       <table class="row-table"> 
        <tr> 
         <td style="background: green;"></td> 
         <td style="background: orange;"></td> 
        </tr> 
       </table> 
       <div class="row-overlay"></div> 
      </div> 
     </td> 
    </tr> 
</table> 

CSS代碼：

tr { 
    height: 25px; 
} 
.event-container { 
    position: relative; 
} 
.event { 
    position: absolute; 
} 
.event { 
    top: 0px; 
    left: 0px; 
    z-index: 1000; 
} 
.event { 
    height: 100%; 
    opacity: 0.25 
} 

.row-container { 
    position: relative; 
    border: 1px solid black 
} 

.row-overlay { 
    position: absolute; 
    top: 0; left: 0; 
    background: black; 
    opacity: 0.50; 
    width: 100%; 
    height: 100%; 
} 

.row-table { 
    width: 100%; 
    border-collapse: collapse; 
} 

您可以檢查這一切了下面撥弄：https://jsfiddle.net/rtubio/sohwqmzs/4/