当宽度不同时，使垂直边框在整个表格中继续

Question

我使用Bootstrap表制作甘特图。我的时间宽度相同。因为我已经设置了colspan =＆＃34; 15＆＃34;在里面，我正在放置一个div并将其设置为我想要的宽度。我想要的是垂直边框从表面的整个主体继续，即使是不同的宽度。这可能吗？这是我的代码：

<div class="table-responsive gantt-chart">
    <table class="table table-bordered table-striped">
        <tbody>
            <tr>
                <th>Time</th>
                <th>Event</th>
                <th>Location</th>
                <th class="time">8am</th>
                <th class="time">9</th>
                <th class="time">10</th>
                <th class="time">11</th>
                <th class="time">12</th>
                <th class="time">1</th>
                <th class="time">2</th>
                <th class="time">3</th>
                <th class="time">4</th>
                <th class="time">5</th>
                <th class="time">6</th>
                <th class="time">7</th>
                <th class="time">8</th>
                <th class="time">9</th>
                <th class="time">10pm</th>
            </tr>
            <tr>
                <td>11:00 am</td>
                <td>Awesome party</td>
                <td>Party room</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:144px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>1:15 pm</td>
                <td>Test Event</td>
                <td>Home</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:252px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>3:15 pm</td>
                <td>Chad event</td>
                <td>tu casa</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:348px; width:72px;"></div>
                </td>
            </tr>
            <tr>
                <td>9:00 pm</td>
                <td>Randomness</td>
                <td>Random Hall</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:624px; width:72px;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

以下是它的外观截图：

我在那里绘制的黑线表示我想对每个部分做些什么。我不确定这是否可行，或者我是否需要寻找其他方法。我使用php在正确的位置输入蓝色div以匹配列出的时间。

Answer 1

由于之前的解决方案（见下文）在某些情况下失败了，并且您已经将jQuery添加到项目中（Bootstrap需要），这是另一个如何使用JavaScript完成的示例，可能更好：< / p>

• 动态添加竖条（可能是div s）
• 将它们放在桌子后面
• 根据每一行设置位置
• 调整页面大小时重新调整位置。

这样的事情（你也可以see it on this JSFiddle）：

function setVerticalBars() {

    var x = 0;
    
    // for each cell with a .time class
    $(".time").each(function() {

        // create the vertical line if it doesn't exist
        if (!$("#vertical-bar-" + x).length) {
            $(".mygantt").append('<div id="vertical-bar-' + x + '" class="vertical-bar"></div>');
        }

        // select the vertical bar associated to this cell
        var bar = $("#vertical-bar-" + x);

        // place it in he same position as the cell
        bar.css("left", $(this).position().left);

        // increase the counter to avoid duplicated id's
        x++;
    });
}

// adjust the divs on page load and when the page is resized
$(document).ready(setVerticalBars );
$(window).on("resize", setVerticalBars );

/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
    background:rgba(0,0,0,0.05) !important;
}

.mygantt .vertical-bar {
    width:1px;
    background:rgba(0,0,0,0.1);
    position:absolute;
    top:0;
    bottom:0;
}

/* Styles from question */
th.time, td.time {
    width:48px;
}

.gantt-chart {
    position:relative;
}

.gantt-line {
    background:blue;
    height:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="table-responsive gantt-chart mygantt">
    <table class="mytable table table-bordered table-striped">
        <tbody>
            <tr>
                <th>Time</th>
                <th>Event</th>
                <th>Location</th>
                <th class="time">8am</th>
                <th class="time">9</th>
                <th class="time">10</th>
                <th class="time">11</th>
                <th class="time">12</th>
                <th class="time">1</th>
                <th class="time">2</th>
                <th class="time">3</th>
                <th class="time">4</th>
                <th class="time">5</th>
                <th class="time">6</th>
                <th class="time">7</th>
                <th class="time">8</th>
                <th class="time">9</th>
                <th class="time">10pm</th>
            </tr>
            <tr>
                <td>11:00 am</td>
                <td>Awesome party</td>
                <td>Party room</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:144px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>1:15 pm</td>
                <td>Test Event</td>
                <td>Home</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:252px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>3:15 pm</td>
                <td>Chad event</td>
                <td>tu casa</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:348px; width:72px;"></div>
                </td>
            </tr>
            <tr>
                <td>9:00 pm</td>
                <td>Randomness</td>
                <td>Random Hall</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:624px; width:72px;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

此解决方案可以调整表格中的优先级以及用户调整窗口大小时可能发生的更改。我认为它比前一个更好，但我会留下旧的参考。

编辑 - 以前的解决方案：

正如我在评论中提到的，一种可能的解决方案是将背景图像添加到模仿垂直线的table。这可以通过以下方式实现：

.mytable {
    background:url(http://i.imgur.com/8jNZRyf.png) repeat-y right top;
}

现在您需要再解决一个问题：Bootstrap table-stripped样式有一行透明，下一行是灰色。您将能够看到仅通过偶数行但不通过奇数行的垂直线。要解决此问题，请将奇数行的背景从灰色更改为半透明颜色：

.mytable>tbody>tr:nth-child(odd)>td {
    background:rgba(0,0,0,0.05) !important;
}

这应该可以解决问题。你可以在这个JSFiddle上看到一个演示：http://jsfiddle.net/8su2cr5m/

此解决方案存在一个问题：只要单元格具有预期宽度，背景图像就会起作用;如果他们不这样做（例如：当桌子占据超过100％时，可以调整单元格大小以使桌子适合可用空间）。对此的解决方案可能是计算JS中的宽度并相应地调整背景图像的大小。

以下是您的案例的完整代码（您可以看到我在上面段落中指定的问题，但如果您全屏显示，则问题就会消失）：

/* set the table background to mimic the vertical bars bars */
.mytable {
  background:url(http://i.imgur.com/8jNZRyf.png) repeat-y right top;
}

/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
  background:rgba(0,0,0,0.05) !important;
}

/* Styles from question */
th.time, td.time {
  width:48px;
}

.gantt-line {
  background:blue;
  height:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="table-responsive gantt-chart">
  <table class="mytable table table-bordered table-striped">
    <tbody>
      <tr>
        <th>Time</th>
        <th>Event</th>
        <th>Location</th>
        <th class="time">8am</th>
        <th class="time">9</th>
        <th class="time">10</th>
        <th class="time">11</th>
        <th class="time">12</th>
        <th class="time">1</th>
        <th class="time">2</th>
        <th class="time">3</th>
        <th class="time">4</th>
        <th class="time">5</th>
        <th class="time">6</th>
        <th class="time">7</th>
        <th class="time">8</th>
        <th class="time">9</th>
        <th class="time">10pm</th>
      </tr>
      <tr>
        <td>11:00 am</td>
        <td>Awesome party</td>
        <td>Party room</td>
        <td class="gantt-section" colspan="15">
          <div class="gantt-line" style="margin-left:144px; width:48px;"></div>
        </td>
      </tr>
      <tr>
        <td>1:15 pm</td>
        <td>Test Event</td>
        <td>Home</td>
        <td class="gantt-section" colspan="15">
          <div class="gantt-line" style="margin-left:252px; width:48px;"></div>
        </td>
      </tr>
      <tr>
        <td>3:15 pm</td>
        <td>Chad event</td>
        <td>tu casa</td>
        <td class="gantt-section" colspan="15">
          <div class="gantt-line" style="margin-left:348px; width:72px;"></div>
        </td>
      </tr>
      <tr>
        <td>9:00 pm</td>
        <td>Randomness</td>
        <td>Random Hall</td>
        <td class="gantt-section" colspan="15">
          <div class="gantt-line" style="margin-left:624px; width:72px;"></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

function setVerticalBars() {

    var x = 0;
    
    // for each cell with a .time class
    $(".time").each(function() {

        // create the vertical line if it doesn't exist
        if (!$("#vertical-bar-" + x).length) {
            $(".mygantt").append('<div id="vertical-bar-' + x + '" class="vertical-bar"></div>');
        }

        // select the vertical bar associated to this cell
        var bar = $("#vertical-bar-" + x);

        // place it in he same position as the cell
        bar.css("left", $(this).position().left);

        // increase the counter to avoid duplicated id's
        x++;
    });
}

// adjust the divs on page load and when the page is resized
$(document).ready(setVerticalBars );
$(window).on("resize", setVerticalBars );

/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
    background:rgba(0,0,0,0.05) !important;
}

.mygantt .vertical-bar {
    width:1px;
    background:rgba(0,0,0,0.1);
    position:absolute;
    top:0;
    bottom:0;
}

/* Styles from question */
th.time, td.time {
    width:48px;
}

.gantt-chart {
    position:relative;
}

.gantt-line {
    background:blue;
    height:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="table-responsive gantt-chart mygantt">
    <table class="mytable table table-bordered table-striped">
        <tbody>
            <tr>
                <th>Time</th>
                <th>Event</th>
                <th>Location</th>
                <th class="time">8am</th>
                <th class="time">9</th>
                <th class="time">10</th>
                <th class="time">11</th>
                <th class="time">12</th>
                <th class="time">1</th>
                <th class="time">2</th>
                <th class="time">3</th>
                <th class="time">4</th>
                <th class="time">5</th>
                <th class="time">6</th>
                <th class="time">7</th>
                <th class="time">8</th>
                <th class="time">9</th>
                <th class="time">10pm</th>
            </tr>
            <tr>
                <td>11:00 am</td>
                <td>Awesome party</td>
                <td>Party room</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:144px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>1:15 pm</td>
                <td>Test Event</td>
                <td>Home</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:252px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>3:15 pm</td>
                <td>Chad event</td>
                <td>tu casa</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:348px; width:72px;"></div>
                </td>
            </tr>
            <tr>
                <td>9:00 pm</td>
                <td>Randomness</td>
                <td>Random Hall</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:624px; width:72px;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>