文章/答案/技术大牛

发布

社区首页 >问答首页 >当<th>具有不同的宽度时，使<td>垂直边框继续贯穿整个表

问当<th>具有不同的宽度时，使<td>垂直边框继续贯穿整个表
EN

Stack Overflow用户

提问于 2015-07-29 23:34:48

回答 2查看 695关注 0票数 1

我用引导表来制作甘特图。我的时间是相同的宽度。对于我已经设置了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>

这是一个截图，它看起来是什么样子：

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

html-table

bootstrap-table

html

css

twitter-bootstrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-30 00:45:22

由于前面的解决方案(请参见下面)在某些情况下失败，并且您已经将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;
}

现在您需要修复另一个问题: 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>

票数 1

Stack Overflow用户

发布于 2019-02-06 09:50:48

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31712917

复制

相似问题

问当<th>具有不同的宽度时，使<td>垂直边框继续贯穿整个表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当<th>具有不同的宽度时，使<td>垂直边框继续贯穿整个表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当<th>具有不同的宽度时，使<td>垂直边框继续贯穿整个表
EN