Html 困惑于构建具有固定标题的表的示例
有人能帮我指出哪些样式是构建这个固定标题表的关键吗?这是我发现的唯一有用的例子,但我不知道是哪种风格最重要 我也很好奇为什么需要一个DIV和padding来实现这一点Html 困惑于构建具有固定标题的表的示例,html,css,html-table,fixed-header-tables,Html,Css,Html Table,Fixed Header Tables,有人能帮我指出哪些样式是构建这个固定标题表的关键吗?这是我发现的唯一有用的例子,但我不知道是哪种风格最重要 我也很好奇为什么需要一个DIV和padding来实现这一点 <section class=""> <div class="container"> <table> <thead> <tr class="header"> <th> Tabl
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
<style>
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
</style>
表属性名称
表属性名称
价值
价值
描述
描述
排列
左、中、右
HTML5中不支持。在HTML4.01中已弃用。根据周围文字指定表格的对齐方式
bgcolor
rgb(x,x,x),#xxxxxx,颜色名称
HTML5中不支持。在HTML4.01中已弃用。指定表格的背景色
边境
1,""
指定表格单元格是否应有边框
细胞填充
像素
HTML5中不支持。指定单元墙和单元内容之间的空间
细胞间距
像素
HTML5中不支持。指定单元格之间的间距
框架
空白、上方、下方、侧面、左侧、右侧、侧边、方框、边框
HTML5中不支持。指定外部边框的哪些部分应可见
规则
无、组、行、列、全部
HTML5中不支持。指定内部边框的哪些部分应可见
总结
文本
HTML5中不支持。指定表内容的摘要
宽度
像素,%
HTML5中不支持。指定表格的宽度
html,正文{
保证金:0;
填充:0;
身高:100%;
}
部分{
位置:相对位置;
边框:1px实心#000;
填充顶部:37px;
背景:#500;
}
第1节定位{
位置:绝对位置;
顶部:100px;
左:100px;
宽度:800px;
盒影:0 0 15px#333;
}
.集装箱{
溢出y:自动;
高度:200px;
}
桌子{
边界间距:0;
宽度:100%;
}
td+td{
左边框:1px实心#eee;
}
td,th{
边框底部:1px实心#eee;
背景:ddd;
颜色:#000;
填充:10px 25px;
}
th{
身高:0;
线高:0;
填充顶部:0;
填充底部:0;
颜色:透明;
边界:无;
空白:nowrap;
}
第四分区{
位置:绝对位置;
背景:透明;
颜色:#fff;
填充:9px 25px;
排名:0;
左边距:-25px;
线高:正常;
左边框:1px实心#800;
}
th:第一儿童组{
边界:无;
}
你的问题有点含糊。您发布的代码在中没有固定的标题,因为它们在元素上使用位置:fixed
。该代码基本上是一个包含数据的常规旧表。“棘手”的部分是用户创建一个新的标题部分,它位于现有的thead
之上,这就是为什么您会看到这样的代码
<th>
Table attribute name
<div>Table attribute name</div>
</th>
我相信用户使用的是表
和div
组合,这样他们就可以有一个标题,标题下面有可滚动的数据,并且可以正确对齐
如果您想要此代码的真正简化版本而不使用表,则可以使用:
HTML
如果你想玩的话。希望这能有所帮助。我认为,因为这是头条新闻,所以不能减少。这就是为什么您的表格仍然具有一些值,即
min width
等于文本的宽度加上填充/边距。@AleshaOleg谢谢,您能帮我指出哪些样式对构建此布局至关重要吗?谢谢,让我先玩一下。嗨,Matt,我检查一下小提琴。可悲的是,我的老板坚持说,即使我已经实现了像您这样的版本,我也需要使用。所以我想知道你们是否有一个版本提琴的例子?为了更好地帮助你们,我需要知道你们想要实现什么。如果您需要使用具有静态标题的表,该静态标题具有多个与表体匹配的列。。。那么我建议使用你发布的代码。如果您只需要一个标题和下面的可滚动内容,那么有一个简单的方法可以做到这一点。
.container {
overflow-y: auto;
height: 200px;
}
<div class="wrap">
<div class="top">Title here</div>
<div class="scroll">
<div class="text">All your base are belong to us</div>
</div>
</div>
html, body{
margin:0;
padding:0;
height:100%;
}
.wrap {
margin: 0 auto;
width: 600px;
}
.top {
border: 1px solid red;
background: lightgray;
line-height: 50px;
text-align: center;
}
.scroll {
background: pink;
height: 200px;
overflow-y: auto;
}
.text {
height: 1000px;
}