标签: html-table
设置表格单元格内容的最大高度
我有一张桌子应该总是占据屏幕高度的一定百分比.大多数行都是固定高度的,但是我有一行应该伸展以填充可用空间.如果该行中单元格的内容溢出所需高度,我将使用overflow:hidden来剪切内容.
不幸的是,表和行不遵循max-height属性.(这是在W3C规范中).当单元格中的文本太多时,表格会变高,而不是坚持指定的百分比.
如果我为它指定一个固定的高度(以像素为单位),我可以让表格单元格表现出来,但这会使其自动拉伸以填充可用空间的目的失败.
我尝试过使用div,但似乎无法找到神奇的公式.如果我使用带有display:table,:table-row和:table-cell的div,则div就像表一样.
有关如何在表格上模拟max-height属性的任何线索？
<head>
<style>
table {
width: 50%;
height: 50%;
border-spacing: 0;
}
td {
border: 1px solid black;
}
.headfoot {
height: 20px;
}
#content {
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr class="headfoot"><td>header</td></tr>
<tr>
<td>
<div id="content">
put lots of text here
</div>
</td>
<tr>
<tr class="headfoot"><td>footer</td></tr>
</table>
</body>
推荐指数
解决办法
查看次数
如何将HTML表格转换为CSV？
如何将HTML表格(<table>)的内容转换为CSV格式？是否有库或linux程序执行此操作？这类似于Internet Explorer中的复制表,并将它们粘贴到Excel中.
推荐指数
解决办法
查看次数
两列表:一列尽可能小,另一列则剩余
我在div中有一个to-columns表:
<div>
<table>
<tbody>
<tr>
<td class="action" >
<a> ? </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ? </a><a> ? </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
... same structure in all the table
</tbody>
</table>
</div>
我希望"action"列适合内容,而"content"列则需要剩余的可用空间.使用右对齐,"action"列看起来会更好.桌子也应该适合容器宽度的100%.
有没有办法在不修复列宽的情况下这样做？
我试过这个:
table .action
{
width:auto;
text-align:right;
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
}
但左栏占据了一半的表......
推荐指数
解决办法
查看次数
插入较小高度的空白表行
我有一个由标题行和几个数据行组成的表.我想要做的是在标题和数据行之间创建一个空行,但我希望这个空行的高度小于其他行(这样就没有这么大的间隙).
我怎么能做到这一点？
我的表格的HTML标记代码如下:
<table class="action_table">
<tbody>
<tr class="header_row">
<td>Header Item</td>
<td>Header Item 2</td>
<td>Header Item 3</td>
</tr>
<tr class="blank_row">
<td bgcolor="#FFFFFF" colspan="3"> </td>
</tr>
<tr class="data_row">
<td>Data Item</td>
<td>Data Item 2</td>
<td>Data Item 3</td>
</tr>
</tbody>
</table>
推荐指数
解决办法
查看次数
tbody宽度不会自动延伸到表格的宽度
看看这个例子:
而"规格"下的红色表并没有成为包含它的全宽 - 在Firebug上检查时,div不是220像素,而是基于内容宽度超过100个像素.
<div class="grid_4 alpha">
<table width="100%" class="grid_4 alpha omega">
<tr class="specrow">
<td class="specname">type:</td>
<td class="specvalue">House</td>
</tr>
<tr class="specrow">
<td class="specname">year:</td>
<td class="specvalue">1986</td>
</tr>
</table>
</div>
CSS代码如下所示:
#listing_specs table {
width: 100%;
}
#listing_specs table tbody {
display: table-row-group;
width: 100%;
}
.specrow {
margin:2px 0px;
border-bottom:1px dotted #dadada;
color: #fff;
width: 100%;
background-color: #A92229;
}
.specrow:hover {
background-color:#fff;
color:#333;
}
.specname{
font-weight: 600;
padding:2px 2px 2px 5px;
width: 50%;
white-space: nowrap;
}
.specvalue {
font-weight:normal;
padding:2px …推荐指数
解决办法
查看次数
将html表导出到csv
我想在我的网站上添加csv下载选项的功能.它应该将网站中的html表转换为csv内容并使其可下载.我一直在互联网上搜索一个很好的插件,并找到了一些像http://www.dev-skills.com/export-html-table-to-csv-file/ 这样的用途,但它使用php脚本来做下载部分.我想知道是否有一个纯javascript库可用于使用服务器端软件如node.js而不使用php？
推荐指数
解决办法
查看次数
如何在引导程序中使用固定标题(navbar)向下滚动表行时,将表头(thead)粘贴在顶部？
Bootstrap布局fixed-navbar.桌子上有很多行.
问题？当我滚动页面导航栏将在那里,因为它是固定的.当我滚动更多我希望表头在导航栏下修复,表(table-body)的内容滚动没有滚动条!
像这样的东西 - Codepen
**小提琴**引导表
在提到答案之后工作小提琴!
HTML
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something …推荐指数
解决办法
查看次数
HTML表格行 - 如何使一个独特的单元格具有100%的宽度？(有截图说明)
这是我的问题:我有一个HTML表,如下所示:
我想要的是在它下面有一个额外的表行,除了这一行跨越表的整个宽度 - 但只有一个单元格.我很快嘲笑了一个例子:
正如您所看到的,我在其下方添加了另一个表行,其中包含一个<td>包含文本的单元格.但是我希望这个单元格跨越整个表格宽度的100% - 它不应该调整"名称"列的宽度.
这样的事情可能吗？如果需要,我很乐意使用jQuery或Javascript - 此外,这不需要在IE中工作,因为每个用户都使用Chrome(虽然这将是一个特权).
推荐指数
解决办法
查看次数
为什么Google和Twitter使用表格布局？
无论我到哪里,我都看到不使用桌面布局,这是邪恶的,甚至谷歌都这么说,那么为什么访问量最大的网站之一谷歌和Twitter将其用于他们的主页？
我不认为这是任何错误,或任何其他愚蠢的问题.
我能想到的唯一原因是,即使客户端不支持CSS,他们也希望页面看起来相似,就像Lynx一样.
那么,如果互联网上最大的网站使用它,为什么每个人都说它太糟糕了.
在我看来,有些情况,如上面提到的那样,在任何地方看到相同的外观是非常重要的,而不是使用表格.
编辑:同样的问题关于html元素<center>,或格式化文本与属性对齐和其他"html属性和用于替代CSS功能的元素"
推荐指数
解决办法
查看次数
省略</ TD>和</ TR>标签是否安全？
根据w3c </TD>和</TR>标签是可选的,所以下表是完全有效的.
<table>
<tr>
<td>google
<td>chrome
</table>
我测试过的所有浏览器都能很好地呈现表格.我只是想问一下这通常被认为是安全的,或者如果我无法访问的旧浏览器会导致问题.谢谢.
它减少了包含许多表的页面上的gzip html大小百分之几.
推荐指数
解决办法
查看次数
标签 统计
html-table ×10
html ×8
css ×7
autosize ×1
css-position ×1
css3 ×1
csv ×1
javascript ×1
jquery ×1
layout ×1
node.js ×1
reset ×1
w3c ×1
xhtml ×1