个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我在某些 th 上有一个包含 rowspan="2" 的表格。我想在用户将鼠标放在此 th 上的任意位置时显示 Bootstrap 工具提示，但总是有一些自动填充，即使我删除了填充。这会在 th 内创建一个区域，该区域不会激活工具提示。
我也在使用 jQuery tablesorter。
th > div {
width: 100%;
height: 100%;
}
.tooltip-th {
margin: -5px;
padding: 5px 0;
}
.table > thead > tr > th {
vertical-align: middle;
}<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>
<body>
<table class="table well table-condensed table-bordered table-hover table-striped sorter">
<thead>
<tr>
<th rowspan="2">
<div data-toggle="tooltip" data-placement="bottom" title="Tooltip test">
Column title
</div>
</th>
<th>
Column title 2
</th>
</tr>
<tr>
<th>
Column title 3
</th>
</tr>
</thead>
</table>
</body>
</html>最佳答案
那是因为你的 <div>没有填满整个 <th>所以将你的工具提示移动到 <th> . (请参阅下面大写代码中我的代码更改)。不要尖叫只是为了突出我的变化 :) 和平!
PS:添加了 Lime 背景颜色以显示边界位置。添加背景颜色总是一个好主意，这样您就可以看到自己在做什么。
另一个很酷的技巧是将其放入您的 CSS 文件中以显示边界。
* {border: 1px solid red}
(仅在重置框时有效: https://www.paulirish.com/2012/box-sizing-border-box-ftw/ )
th > div {
width: 100%;
height: 100%;
}
.tooltip-th {
margin: -5px;
padding: 5px 0;
}
.table > thead > tr > th {
vertical-align: middle;
}<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>
<body>
<table class="table well table-condensed table-bordered table-hover table-striped sorter">
<thead>
<tr>
<th rowspan="2" TITLE="PLACE YOUR TOOLTIP HERE.">
<div STYLE="BACKGROUND-COLOR: LIME;" data-toggle="tooltip" data-placement="bottom" title="not here...">
Column title
</div>
</th>
<th>
Column title 2
</th>
</tr>
<tr>
<th>
Column title 3
</th>
</tr>
</thead>
</table>
</body>
</html>关于html - Bootstrap : 100% height div inside a th with rowspan，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41279360/
28
4
0
我正在编写一个动态创建 HTML 表格的 PHP 脚本。 有两件东西丢失了，找不到相关信息。 我想减少 rowspan 单元格的“填充”，它在水平方向上太大了。您可以使用什么来修改内部字符串和单元格末
我有 HTML 表格。我正在遍历表并遍历其第三个单元格具有 rowspan 属性的每一行。我如何检查是否找到 rowspan 然后检查它的第一个单元格是否有文本。如果是，则分配给 javascript
我将通过一个示例向您展示我的问题，这里我使用带有 rowspan 的列: Familie Jill Smith 50 Eve Jackson 94 不知何故，当
see fiddle 首先，我是 jquery 的新手。 我只需要选择一个单元格#tableAppointment tbody tr td:nth-child(2)文本框值应转到选择开始的下一个单元格
我不明白为什么我的列不会跨越我创建的顶部和底部行。它应该看起来像“今天”栏的顶部和底部比其他栏高。 这是很多代码，我不确定在不变形或添加新变量(它需要流体高度)的情况下我应该削减什么。JSFiddle
我有一个简单的 table 和 rowspan 。我需要那个单元格 1、单元格 2 和单元格 6 的大小相同。请问我怎样才能做到这一点 number1 number3
我只是想问一下我是否可以把在顶部，因为我在 上使用了一个 rowspan .请参阅下面的示例。 这是我的代码: Month Savings Savings for h
请注意，“倒置”表示 现在代表一列。 我使用这个 CSS 代码(我在互联网上找到的)反转了一个 HTML 表格: table { border-collapse: collapse; } tr {
我用 html 制作了一个表格，但是当我尝试增加表格单元格的高度时，它并没有增加。 这是 index.html 文件: Title Card
我正在尝试创建一个表格，其中第 1 行中的单元格 1 和单元格 2 都跨越 2 行以获得更大的标题，同时仍位于它们自己的单独单元格中。看起来像这段代码的东西 Quarter
我试图让最后一行跨越前一行的 3 行。但是由于某种原因，这不起作用，我已经用几种不同的方式多次重写了代码，但似乎无法让它起作用: CSS: .div_walkthroughs_wrapper {
我一直在尝试实现一些非常简单的事情，如下所示，在我的代码中，您可以看到，在 td 中，我设置了 rowspan="2" 并放置了一个 输入“id=图像”。我正在尝试将图像放在 input 字段下方。
我应该有一些非常简单的 html，但由于某种原因，我无法使 rowspan 工作。它不会填充整个左侧列，而是只占据其底部的一个单元格。我想要这样的东西: +----------+-----------
如何在这种结构中制作一个 html 表格？ +--------------+-----+--------------+ | | | | |
我想我正在尝试做的这个模式比问题本身更具描述性。 +------------------------+-----------------------+ |
我有一个类似 this 的表格: Items Type Values Date
我见过一些类似的问题，但没有任何答案可以回答这个特定问题。考虑下表: one two three four
aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa table td { padding: 3px
我有一张 table (2 x 2)。如果我在行跨度为 2 的第一个单元格中添加一个短语作为单元格，它就可以工作。但如果我使用图像作为单元格，行跨度永远不会适用。 float[] rowwid
我希望一周的学生和事件以日历格式显示。我有如下数组。每个学生有 7 个数组，从星期一到星期天，每个数组的内部都有当天的事件 $array = [ 'Alex' => [ [
我是一名优秀的程序员,十分优秀！