html - 当 <td> 具有不同的宽度时，使 <th> 垂直边框贯穿整个表格

标签 html css twitter-bootstrap html-table bootstrap-table

我正在使用 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>

下面是它的截图:

Table question stackoverflow

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

最佳答案

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

  • 动态添加竖线(它们可以是 div)
  • 将它们放在 table 后面
  • 根据每一行设置位置
  • 在调整页面大小时重新调整它们的位置。

像这样(你也可以 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>

关于html - 当 <td> 具有不同的宽度时，使 <th> 垂直边框贯穿整个表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31712917/

上一篇：css - 将文本和按钮定位在视频标题的顶部

下一篇：javascript - 响应地将 div 高度调整为背景图像高度

相关文章：

ruby-on-rails - rails :Limiting how many files a user can upload

html - 在图像上居中文本

html - 悬停功能干扰 href 标签

javascript - 如何在不影响其余页面样式的情况下加载带样式的 HTML 文件？

javascript - jquery 用动画图像替换鼠标光标

javascript - 单击时模态按钮不执行任何操作

javascript - jquery 中的 slider 同时显示 4 张幻灯片

JavaScript 计时与 CSS 计时

html - 如何更改文本溢出的颜色 : ellipsis by hovering it

css - 如何在 Bootstrap 4 中垂直对齐元素？

©2024 IT工具网  联系我们