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» с помощью CSS без использования 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 класса событий на относительную.

Это может решить вашу проблему.

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/