Javascript 具有固定页眉和页脚以及无固定宽度的可滚动正文的HTML表格
我想用固定的Javascript 具有固定页眉和页脚以及无固定宽度的可滚动正文的HTML表格,javascript,html,css,html-table,Javascript,Html,Css,Html Table,我想用固定的thead和tfoot以及可滚动的tbody创建一个表 我尝试了几种方法,包括仅CSS和CSS+Javascript,但它们都很弱且不可靠,我可以通过在演示中更改标记轻松地打破它们 我想要的是一种使表像表一样运行的方法,这意味着浏览器将根据内容自动调整列(在页面加载时,在窗口调整大小的情况下)以及在以下情况下: <table> <thead> <tr> <th>Header one *leads the widt
thead
和tfoot
以及可滚动的tbody
创建一个表
我尝试了几种方法,包括仅CSS和CSS+Javascript,但它们都很弱且不可靠,我可以通过在演示中更改标记轻松地打破它们
我想要的是一种使表像表一样运行的方法,这意味着浏览器将根据内容自动调整列(在页面加载时,在窗口调整大小的情况下)以及在以下情况下:
<table>
<thead>
<tr>
<th>Header one *leads the width* (case 1)</th>
<th>Header two</th>
<th>Header three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer one</td>
<td>Footer two</td>
<td>Footer three *leads the width* (case 3)</td>
</tr>
</tfoot>
</table>
thead>tr>th
)大于列正文的内容(tbody>tr>td
),且大于列页脚的内容(tfoot>tr>td
),则应根据列标题的大小调整列的大小tbody>tr>td
)大于列标题的内容(thead>tr>th
),且大于列页脚的内容(tfoot>tr>td
),则应根据列正文的大小调整列的大小tfoot>tr>td
)大于列页眉的内容(thead>tr>th
),并且大于列正文的内容(tbody>tr>td
),则应根据列页脚的大小调整列的大小表
应阐明各种情况:
<table>
<thead>
<tr>
<th>Header one *leads the width* (case 1)</th>
<th>Header two</th>
<th>Header three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer one</td>
<td>Footer two</td>
<td>Footer three *leads the width* (case 3)</td>
</tr>
</tfoot>
</table>
标题1*引导宽度*(案例1)
标题二
头球三
第一栏
第二列*引出宽度*(案例2)
第三栏
页脚一
页脚二
页脚三*引导宽度*(案例3)
我想要一个干净(尽可能)可靠的解决方案,它将适用于不同的场景,可能只使用CSS,也可以使用JavaScript(普通和干净的JavaScript,而不是jQuery插件)。
我不关心旧浏览器的支持(拥有它会很好,或者至少能找到一个在旧浏览器上可以正常降级的解决方案,但这是可选的)。。。我甚至可以接受使用div
s而不是表节点,如果最终的解决方案按预期工作。。。那么在2016年,有了现代浏览器和CSS,这有可能吗
编辑:
正文应该垂直滚动,表格可以有任意数量的列
更新:
我提出了这个解决方案:
但我仍然不是100%满意。主要问题是我不能为页眉和页脚单元格设置不同的背景
更新2:
现在可以了 您可以通过使用表的包装器(
div
)实现您想要的功能,并使tr
从thead
和tfoot
a位置:绝对
正文{
保证金:0
}
div{
最大高度:500px;
溢出y:自动;
}
桌子{
宽度:100%
}
thead tr,
tfoot tr{
位置:绝对位置;
左:0;
右:15px;
/*不覆盖滚动条*/
背景:红色
}
西亚斯,
tfoot td{
显示:内联块;
}
thead tr{
排名:0
}
tfoot tr{
顶部:500px/*相同值与div的最大高度*/
}
th,
运输署{
宽度:计算((100%/3)-5px);
字体大小:12px;
文本对齐:居中
}
/*在thead和tfoot之间留出一些空间*/
t车身tr:td型的第一个{
填充顶部:35px;
}
t车身tr:td型的最后一个{
垫底:35px;
}
标题1*引导宽度*(案例1)
标题二
头球三
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
第二列*引出宽度*(案例2)
第三栏
第一栏
<div class="wrapper">
<div class="container">
<table>
<thead>
<tr>
<th>
Header one *leads the width* (case 1)
<div class="c1">
Header one *leads the width* (case 1)
</div>
</th>
<th>
Header two
<div class="c2">
Header two
</div>
</th>
<th>
Header three
<div class="c3">
Header three
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three [first]</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three [LATEST]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Footer one
<div class="c1">
Footer one
</div>
</td>
<td>
Footer two
<div class="c2">Footer two</div>
</td>
<td>
Footer three *leads the width* (case 3)
<div class="c3">Footer three *leads the width* (case 3)</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
$.ajax({
url: "upload.php",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( data ) {
console.log("PHP Output:");
console.log( data );
});
return false;
}
table th {
position:sticky;
top: 0;
}