- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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>
下面是它的截图:
我在那里画的黑线表示我想对每个部分做什么。我不确定这是否可行,或者我是否需要寻找其他方法。我正在使用 php 在正确的位置输入蓝色 div,以匹配列出的时间。
最佳答案
由于以前的解决方案(见下文)在某些情况下会失败,并且您已经将 jQuery 添加到元素中(Bootstrap 需要),这里是另一个如何使用 JavaScript 完成它的示例并且可能会更好:
div
)像这样(你也可以 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/
在 Python 中,为什么这两个 5 * ['th'] 和 [5 * ' th'] 给出几乎相同的结果?这里的问题是为什么 5* ['th'] 给出的列表是五倍而不是五个列表。 >>>5 * ['t
我正在创建一个 HTML 表格,该表格当前有一个点击事件附加到列标题 TH 以对表格进行排序。 我现在要做的是在您单击“某处”时通过显示额外的隐藏列来扩展列。现在,我对这个“某处”的最初想法是在每个具
很容易看出公式是正确的,但我不知道如何证明这一点。其他一些树怎么样:每个节点有 3 个 child ,4 个 child 的树......?谢谢! 最佳答案 您必须证明,如果您按级别顺序遍历一棵完整的
我尝试使用下面的函数来隐藏基于第一个标签之间的单词的列以下是我到目前为止所拥有的但目前不起作用 $('#MenuContent_butUsers').click(function () { h
我想让下面的输出看起来像图像中的一样,只将标题 th 分成两个 th 就像蓝线我需要两个用于单个 td 的 header ,请帮忙,谢谢。 table { font-family: aria
我有多个选择选项。但是,我希望当我选择 1 个或两个选项或其他选项时更改列 动态生成html并从数据库获取数据 目前我已经创建了多重选择选项和 html 表格
我有一个表,它有一个表头,它有如下子表头: table, th, td { border: 1px solid black; } Fisrt Name Last Na
我需要迭代并创建 每个 component 的元素在components具有 name 的数组的 'MATERIAL' 我的代码如下 此代码在生成一组空 之前一切正常元素如果
我最近才开始在我的一个项目中使用 Thymeleaf。我见过一些在某些地方使用 th:text=${example} 的示例 th:value=${example}。 我已经浏览了 Thymeleaf
首先,我检查从中获取轨道列表的项目是否是 CD。如果这是真的,我想循环列表并为每个条目创建一个段落。我的问题是,对于非 CD 的项目,我会在 ${item.getTrackList()} 处收到错误,
我解析一些站点并获取 TH 元素实例,然后我使用 innerText 获取所需的文本,当有一些我不需要的额外垃圾文本时,问题就来了。无论如何我只能获得顶级文本吗? var th_elem = /*so
我有一个脚本可以将表解析为 json。 这样的效果很好 Name Value 与脚本逻辑: var headers = []; $(rows.s
我有一个 html 表格,其中一个标题跨越 2 列。如何向两列中的每一列添加子标题? 例如在附图中,我希望“联系人”列的各个列具有子标题“电话”和“地址”。 最佳答案 如果你在纸上画出表格,你会采用同
我是 Thymeleaf(和 webdev)的新手,我正在尝试将 Thymeleaf 迭代 (th:each) 与 URL 重写 (th:href) 结合起来。 hello 这会产生以下结果(其中
我有一个表单,我想在其中编辑一些用户数据。 所以已经存储的数据被放置为 th:value 并且在发送后我使用 spring 验证进行验证并希望在错误输入时返回表单。我希望输入字段具有用户输入的值,但它
我正在使用一个位于“th”标签下的下拉框。我正在使用以下代码。 Element_Name 我动态调用我的下拉元素。 我想在列表顶部显示“选择”作为我的默认元素。我已尝试使用以下代码。但这并没有奏效。
我是 thymeleaf 的新手,我正在尝试创建一个 html 表,其中一个 boolean 值决定文本在某些列中是通过还是失败。 SmokeTest.passOrFailArray 是一个 bool
我是 thymeleaf 的新手,我正在尝试创建一个 html 表,其中一个 boolean 值决定文本在某些列中是通过还是失败。 SmokeTest.passOrFailArray 是一个 bool
我如何使用 Jquery 动态地为 th 添加值。我希望在 Heading7 之后将值附加到 Heading8 和 Heading9 Heading1 He
我正在尝试创建一个包含可排序行的表格 - 但其中一行也需要一个下拉列表。 问题是,当单击下拉菜单时 - 表头的单击事件正在触发,导致不应该发生的事情发生。 我发现了这个: http://www.vel
我是一名优秀的程序员,十分优秀!