我正在尝试使用bootstrap 3表创建一个具有固定标头和可滚动内容的表.不幸的是,我发现的解决方案不适用于bootstrap或搞乱风格.
这里有一个简单的bootstrap表,但由于某些原因我不知道tbody的高度不是10px.
height: 10px !important; overflow: scroll;
例:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>我有一个简单的表用于收件箱,如下所示:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
如何设置宽度,使"从"和"日期"为页面宽度的15%,"主题"为70%.我也希望表占用整个页面宽度.
我试图弄清楚如何只在表格内添加边框.当我做:
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
边界围绕整个表格,也在表格单元格之间.我想要实现的是在表格单元格周围的表格内只有边框(表格周围没有外边框).
这是我用于表格的标记(尽管我认为这并不重要):
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>
以下是我应用于大多数表格的一些基本样式:
table {
border-collapse: collapse;
border-spacing: 0;
}
我有一个非常简单的HTML表,有4列:
Facility Name, Phone #, City, Specialty
我希望用户能够按设施名称和仅城市进行排序.
我如何使用jQuery编写代码？
如何删除表中行和列之间的额外空间.
我已经尝试更改表和tr和td上的边距,填充和各种边框属性.
我希望这些照片彼此相邻,看起来像一个大图像.
我该怎么解决这个问题？
CSS
table {
border-collapse: collapse;
}
HTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tera Byte Video Game Creation Camp</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<table class="mytable" align="center">
<tr class="header">
<td colspan="3"><img src="images/home_01.png" /></td>
</tr>
<tr class="top">
<td colspan="3"><img src="images/home_02.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_03.png" /></td>
<td><img src="images/home_04.png" /></td>
<td><img src="images/home_05.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_07.png" /></td>
<td><img src="images/home_06.png" /></td>
<td><img src="images/home_08.png" /></td>
</tr> …我希望能够"调整"HTML表格的演示文稿以添加单个功能:当向下滚动页面以使表格在屏幕上但标题行在屏幕外时,我希望标题保持不变在观察区域的顶部可见.
这在概念上类似于Excel中的"冻结窗格"功能.但是,HTML页面中可能包含多个表,我只希望它发生在当前处于视图中的表中,只有在它处于视图中时才会发生.
注意:我已经看到一种解决方案,其中表数据区域可滚动而标题不滚动.这不是我正在寻找的解决方案.
很多人仍然使用表格来布局控件,数据等.这个例子就是流行的jqGrid.但是,有一些神奇的事情我似乎无法理解(它的桌子大声喊叫,可能有多少魔法？)
如何设置表的列宽并让它像jqGrid一样服从!？如果我试图复制它,即使我设置了每个<td style='width: 20px'>,一旦其中一个单元格的内容大于20px,单元格就会扩展!
任何想法或见解？
看起来(根据本页中的示例,无论如何),如果您使用THEAD,则不需要使用TH.
真的吗？如果是这样,THEAD与TH的优点/缺点是什么？
我正在编写一个页面,我需要一个HTML表来维护一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.想想一个迷你版的excel.这似乎是一项简单的任务,但我在网上找到的几乎所有解决方案都有一些缺点.我怎么解决这个问题？
我有一个包含多个列的HTML表,我需要使用jquery实现列选择器.当用户单击复选框时,我想隐藏/显示表中的相应列.我想这样做而不将表附加到表中的每个td,有没有办法使用jquery选择整个列？以下是HTML的示例.
<table>
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>
<form>
<input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
<input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
<input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>