Question

我有一个表格，我试图在第二列的单元格的开头到最后一列的单元格的末尾，每行覆盖一个div。

我可以将叠加层的宽度更改为给定值，例如200px;但我理想的是要指定该宽度的值，以便div完美地“锚定”到单元格的末尾。

HTML code：

<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“使用CSS将div跨越到单元格X的末尾”而不使用JavaScript？

Answer 1

您可以尝试以下这些行的演示。

我已将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 2

试试这个，我已经使用了jQuery

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

.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 3

我在没有使用JavaScript的情况下找到了以下解决方案。解决方案通过在我想要换行的行中创建一个子表来包含在div元素中。这个＆＃34; div＆＃34;元素将是表格的容器，我可以定位另一个＆＃34; div＆＃34;覆盖第一个。

HTML code：

<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/

Div覆盖多个表列

3 个答案: