是否有CSS/JavaScript技术来显示一个长HTML表格,使列标题保持固定在屏幕上,第一个coloumn保持固定并滚动数据.
我希望能够滚动表格的内容,但始终能够看到顶部的列标题和左侧的第一列.
如果有一个jQuery插件会很棒!如果它有助于我唯一关心的浏览器是Firefox.
我想zebra-stripe一个html表而不使用任何js东西或编写服务器端代码来为表行生成偶数/奇数类.是否有可能使用原始css?
我一直试图想办法用一个固定的第一列制作一个表(并且表的其余部分有一个水平溢出)我看到一个帖子有一个类似的问题.但固定列位似乎没有得到解决.救命?
我正在用HTML创建一个表格,我希望我的顶部单元格宽度为2.这是一幅粗略的图画:
__________________________________________
| HEADER |
| |
==========================================
| || |
| CONTENT || CONTENT |
| || |
------------------------------------------
Run Code Online (Sandbox Code Playgroud)
有没有办法在HTML中实现这一点?
我有这张桌子:
<body>
<table id="page" >
<tr id="header" >
<td colspan="2" id="tdheader" >je suis</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
Run Code Online (Sandbox Code Playgroud)
这是css
html, body, #page {
height:100%;
width:100%;
margin:0;
padding:0;
}
#header {
margin:0;
padding:0;
height:20px;
background-color:green;
}
Run Code Online (Sandbox Code Playgroud)
我想删除所有边距和填充但总是我有:

我该如何解决这个问题?
我理解这是一个受欢迎的问题,我已经在Stack Overflow和其他网站(包括datatables网站)上阅读了所有类似的问题.
为了澄清,我正在使用
我还确保我正确地收到了JSON数组:
[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]
Run Code Online (Sandbox Code Playgroud)
我的HTML表格如下所示:
<table id="customer_table">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
</table>
Run Code Online (Sandbox Code Playgroud)
这是我的document.ready功能:
$(document).ready(function(){
//$('#customer_table').DataTable();
$('#customer_table').DataTable( {
"ajax": 'json',
"dataSrc": "",
"columns": [
{ "data": "email" },
{ "data": "name_en" }
]
});
});
Run Code Online (Sandbox Code Playgroud)
我得到的错误是
未捕获的TypeError:无法读取未定义的属性"长度"
我正在努力从使用表格进行布局,再到使用div(是的,是的辩论).我有3个div,标题,内容和页脚.页眉和页脚各50px.如何让页脚div保持在页面底部,内容div填充两者之间的空间?我不想硬编码内容div高度,因为屏幕分辨率可能会改变.
好吧,我试图购买不应该使用html表的想法,而div应该是.但是,我经常使用类似于以下内容的代码
<table>
<tr>
<td>First Name:</td>
<td colspan="2"><input id="txtFirstName"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td colspan="2"><input type="text" id="txtLastName"/></td>
</tr>
<tr>
<td>Address:</td>
<td>
<select type="text" id="ddlState">
<option value="NY">NY</option>
<option value="CA">CA</option>
</select>
</td>
<td>
<select type="text" id="ddlCountry">
<option value="NY">USA</option>
<option value="CA">CAN</option>
</select>
</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
我希望标签对齐,我希望控件对齐.如果不使用表格,我该怎么做?
我有一些html表,文本数据太大,不适合.因此,它会垂直扩展单元格以适应这种情况.因此,现在具有溢出的行的高度是具有较少数据量的行的两倍.这是无法接受的.如何强制表具有相同的行高1em?
这是一些重现问题的标记.表应该只是一行的高度,隐藏溢出的文本.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { width:250px; }
table tr { height:1em; overflow:hidden; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>This is a test.</td>
<td>Do you see what I mean?</td>
<td>I hate this overflow.</td>
</tr>
</table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 它似乎align不适用于第th个元素.这是我的HTML:
<div style="width: 100%; height: 175px; overflow: auto;">
<table class="grid" id="table">
<thead>
<tr>
<th class="not_mapped_style" style="display: none;" align="center">id</th>
<th class="not_mapped_style" align="center">DisplayName</th>
<th align="center">PrimaryEmail</th>
<th align="center">Age</th>
<th align="center">Phone</th>
</tr>
</thead>
<caption>Contacts</caption>
<tbody>
<tr>
<td style="display: none;" property_value="0" property_name="id" align="center">0</td>
<td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
<td property_value="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
<td property_value="69" property_name="Age" align="center">69</td>
<td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>
</tr>
</tbody>
</table>
</div>Run Code Online (Sandbox Code Playgroud)
文本对齐对于td元素工作得很好,但是失败了th.为什么?
html-table ×10
css ×6
html ×6
codeigniter ×1
datatables ×1
fixed ×1
javascript ×1
jquery ×1
json ×1
margin ×1
overflow ×1
padding ×1