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/