个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
如何修改下面的代码，使 Table THead 与 TD 相匹配，并遵守表格的大小(宽度)？现在发生的情况是表格标题超出了 div 的大小，并且表格水平地横跨整个页面。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
table-layout: fixed;
}
table th {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #fafafa;
text-align: left;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
height: 20px;
width: 200px;
}
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
_position: fixed;
_position: relative;
_position: absolute;
}
TABLE THEAD TR TH {
top:expression(this.offsetParent.scrollTop);
border-top:1px solid #ccc;
_position:relative;
_position: absolute;
_position: fixed;
}
table tr:first-child td {
border-top: 0;
}
</style>
</head>
<body>
<div id="container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th>File Number</th>
<th> </th>
<th> </th>
<th>Firstname</th>
<th>Lastname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>
</tbody>
<!-- Table Body -->
</table>
<script>
$(function() {
$( "#data tr th" ).resizable({
handles: 'e'
});
});
</script>
</div>
</body>
</html>
预计到达时间
最佳答案
将容器的 CSS 编码修复为:
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
position: fixed;
}
问题已通过 IE7 解决。
关于html - 表格 Thead 与 TD Cells 不匹配并且不符合表格大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15343876/
25
4
0
cell.layoutIfNeeded() 和 cell.layoutSubviews() 和 cell.setNeedsDisplay() 方法一般有什么作用？ 最佳答案 布局 subview 布置
是否可以在GXT 3.0中逐个单元地定义编辑器类型？ 我需要创建一个转置表；列变成行，行变成列。在这种情况下，一列(从普通表格的角度来看)将具有不同的编辑器类型，而一行将具有相同的编辑器类型。 我正在
我的表格 View 中前 3 个单元格有一个标签，上面写着“松鼠”这个词。有没有办法做到这一点，如果 UILabel 在我的表格中的多个单元格中显示“Squirrels”，则只显示三个单元格中的第一个
让键和值相同有什么意义？ JVM 会优化内存并使它们在堆中仅一份吗？ 最佳答案 Map通常用于实现Set具有与背景图相同的属性。例如。如果映射是线程安全的，则相应的集合也将是线程安全的。如果 map
这个问题在这里已经有了答案: Testing for nil in Objective-C -- if(x != nil) vs if(x) (4 个答案) 已关闭 9 年前。
我用谷歌表格记录我们俱乐部的出席率。该表格链接到另一个谷歌表格，因此可以自动创建一个名字列表，并按字母顺序排序。在这张表格中，我还根据我们所做的活动，在人的名字旁边手动输入点数。。问题是，由于姓名列表
下面的代码如何工作: .Range("D4:F4").copy .cells(1,1).PasteSpecial 虽然下面不起作用: .Range("D4:F4").copy .cells(1,1)
我正在将一些值传递到 MySQL 数据库表中，我在考虑将整个 javascript 对象数组作为字符串传递是否更快，或者我是否应该根据速度将它们拆分为单元格。 例子: JavaScript 数组: v
display: table-cell; 和单元格之间的空间有问题。我希望所有单元格具有动态相同的宽度。 参见 JSFiddle "Ausstattung & Skizze" 比其他的要宽得多。有没有
我正在使用 apache poi 3.11，从 CellReference，我可以使用以下代码获取 rowIndex 和 Column Index。 CellReference cr = new Ce
我有一个带有圆形和阴影掉落单元格的 Collection View 。当单元格即将被导航栏覆盖时，单元格的阴影突然消失，而不是平滑地移出 View 。下面是代码: contentView.la
我刚开始使用 Swift 作为编程语言，但我遇到了自定义单元格的问题。 当我尝试创建自定义单元格，然后继续尝试按照我需要的方式设计它们(样式设置为自定义)时，一切看起来都不错。现在我不知道如何将特定数
目前，如果满足某些条件，我正在尝试设置一系列单元格的样式。我能够成功地将样式应用于一个单元格，但迄今为止未能成功地将其应用于一个范围。这是我所知道的有效方法: ElseIf OneA / OneC >
如果单元格 A1 为空白并且同一行中的任何单元格不为空白，我需要突出显示它。该行中的大多数单元格中都会包含公式。 最佳答案 创建一个新的条件格式，并使用这个公式: =AND($A$1="",COUNT
我确定这一定是可能的，但我找不到这样做的方法。 我有 2 列，一列带有数字，第二列带有日期。 例如: 数字日期 1 7月21日 2 7 月 22 日 3 7 月 23 日 4 7 月 24 日 5 7
我可能对范围有点困惑(我读过很多关于它的教程，但此时我不明白如何制作这个东西)，无论如何，这就是我想要做的: 我有一个包含各种单元格的表格 Bla 1
宏记录器生成以下语句: Cells.Select 现在我明白，如果没有对象限定符，这会将所有单元格作为 Range 对象返回。 但是，我想知道这个语句的完全限定版本是什么？ 是吗: Applicati
我知道 Range() 和 Cells() 属性是访问工作表上单元格的等效方法。但是，什么时候在这种组合中使用 Range.Cells() 是明智的呢？ 我遇到了一个使用 Range("A1").Re
我有一个动态表，其中每一行都有一个文本框 (txtCantitate) 和一个按钮 (btnMinus)。在文本框中我有数量 (int) 并在按钮上单击我希望数量减少一个。在这里你有我在 table
我有两个 viewController。第一个 VC 在 tableCell 内有 collectionCell。第二个 VC 有 collectionCell，我有 swift File 和 Mod
我是一名优秀的程序员,十分优秀！