1

我正在使用 Bootstrap 表制作甘特图。我的时间是相同的宽度。对于我已经设置了 colspan="15" 并且在其中我放置了一个 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>

这是它的截图：

表问题stackoverflow

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

4

2 回答 2

1

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

  • 动态添加竖线（它们可以是divs）
  • 把它们放在桌子后面
  • 根据每一行设置位置
  • 调整页面大小时重新调整它们的位置。

像这样的东西（你也可以在这个 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;
}

现在您需要解决另一个问题：Bootstraptable-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>

于 2015-07-30T00:45:22.953 回答
0 

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>

于 2019-02-06T09:50:48.523 回答