标签: html-table
如何使用CSS将表放在页面的中心？
我使用以下代码.如何使用CSS将此表放在页面的中心？
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The Main Page</title>
</head>
<body>
<table>
<tr>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
</tr>
</table>
</body>
</html>
推荐指数
解决办法
查看次数
thead和tbody之间的间距
我有一个像这样的简单html表:
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
<tr class="even"><td>Value 3</td><td>Value 4</td></tr>
<tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
<tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
</tbody>
</table>
我想通过以下方式设计它:
- 带有框阴影的标题行
- 标题行和第一个正文行之间的空格
我尝试了不同的东西:
table {
/* collapsed, because the bottom shadow on thead tr is hidden otherwise */
border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th { background-color: #ccc; }
tr.even td …推荐指数
解决办法
查看次数
AngularJS按表头排序行
我有四个表头:
$scope.headers = ["Header1", "Header2", "Header3", "Header4"];
我希望能够通过单击标题对我的表进行排序.
所以,如果我的表看起来像这样
H1 | H2 | H3 | H4
A H D etc....
B G C
C F B
D E A
然后我点击
H2
我的表现在看起来像这样:
H1 | H2 | H3 | H4
D E A etc....
C F B
B G C
A H D
也就是说,每列的内容永远不会改变,但是通过单击我想按列排序的标题,行将自行重新排序.
我的表的内容是由Mojolicious完成的数据库调用创建的,并返回给浏览器
$scope.results = angular.fromJson(data); // This works for me so far
我拼凑在一起的其余代码看起来像这样:
<table class= "table table-striped table-hover">
<th ng-repeat= "header in headers">
<a> {{headers[$index]}} </a> …推荐指数
解决办法
查看次数
修复了带有水平滚动条和垂直滚动条的标题表
我一直试图用html/css粘贴标题+滚动条来解决这个问题.我们正在创建一个程序,一旦容器大小达到某个点(取决于用户的分辨率),就需要显示滚动条.
我在表格的第二列强制使用最小宽度,因此表格会在某个点停止减小并强制容器保持一定的宽度.容器上的溢出显示水平滚动条.一切正常.一旦我为垂直滚动添加第二个滚动条,事情就变得混乱了.有人有解决这个问题的方法吗？我想在.table-body上有一个垂直滚动条,但滚动条必须在外部容器上可见.
是否有一个很好的html/css解决方案固定标头表？我一直在寻找一周,但只能找到这种行为的jQuery插件.
这是我目前的HTML:
<!DOCTYPE html>
<html>
<head>
<title>fixed header prototyping</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="outer-container"> <!-- absolute positioned container -->
<div class="inner-container">
<div class="table-header">
<table id="headertable" width="100%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="header-cell col1">One</th>
<th class="header-cell col2">Two</th>
<th class="header-cell col3">Three</th>
<th class="header-cell col4">Four</th>
<th class="header-cell col5">Five</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell …推荐指数
解决办法
查看次数
如何使用CSS制作带有固定标头的可滚动表
我想使我的表的标题得到修复.表格存在于可滚动的div中.请在此处查看我的代码:http: //jsfiddle.net/w7Mm8/114/请建议我解决此问题.
谢谢
我的代码:
<div style="position: absolute; height: 200px; overflow: auto; ">
<div style="height: 250px;">
<table border="1">
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</table>
</div>
</div>推荐指数
解决办法
查看次数
使用css在表格中设置最后一个td
我想在不使用特定TD上的CSS类的情况下在表中设置最后一个TD的样式.
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
table td
{
border: 1px solid black;
}
我希望包含文本"Five"的TD没有边框但是我不想使用类.
推荐指数
解决办法
查看次数
如何在JSF panelGrid中设置colspan和rowspan？
如何设置colspan,并rowspan在JSF <h:panelGrid>？
推荐指数
解决办法
查看次数
表格滚动HTML和CSS
我有一个像我填充数据的表
<table id="products-table" style="overflow-y:scroll" >
<thead>
<tr>
<th>Product (Parent Product)</th>
<th>Associated Sites</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>
<a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br />
</td>
<td>
<span class="lesser"></span>
</td>
<td>@Html.ActionLink("Edit Product", "Edit", "Products")<br />
@Html.ActionLink("Associate Site", "Associate", "Products")
</td>
</tr>
}
<tr>
</tbody>
</table>
和那样的CSS
#products-table
{
width: 200px;
height: 400px;
overflow:scroll;
}
但滚动不起作用,我想修复表的高度,如果超过,则使用滚动条
推荐指数
解决办法
查看次数
为什么Bootstrap网格布局比HTML表更好？
[注意:对于那些可能会将此问题与"为什么不使用表格进行HTML布局"混淆的人,我不是在问这个问题.我问的问题是为什么网格布局与表格布局根本不同.
我正在为一个项目研究CSS库(特别是Bootstrap).我是程序员而不是网页设计师,我觉得我可以从一个封装好设计的库中受益.
我们都知道使用HTML表来完成基本的站点布局是不好的做法,因为它将表示与内容混合在一起.CSS库(如Bootstrap)提供的一个好处是它们能够在不使用表的情况下创建"网格"布局.但是,我有点麻烦,了解他们的网格布局与等效表格布局有何不同之处.
换句话说,这两个HTML示例之间的根本区别是什么？我认为网格布局只是一个具有其他名称的表格,我错了吗？
<div class="row">
<div class="span16"></div>
</div>
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
和
<table>
<tr>
<td colspan=4></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
推荐指数
解决办法
查看次数
在HTML表格的<td>中设置最小宽度
我的表有几列.
每列应具有动态宽度,该宽度取决于浏览器窗口大小.另一方面,每列不能太小.所以我试着设置min-width那些列,但它不是有效的属性.也试过min-width,<td>但这也是无效的财产.
有没有办法min-width在HTML表格中设置col/td？
推荐指数
解决办法
查看次数
标签 统计
html-table ×10
css ×7
html ×7
angularjs ×1
center ×1
css3 ×1
fixed ×1
grid-layout ×1
header ×1
htmllayout ×1
jsf ×1
panelgrid ×1
spacing ×1