html表头与表体对不齐
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html表头与表体对不齐相关的知识,希望对你有一定的参考价值。
我有一个好长的表格,(ecside组件生成的),前面表头表体都是正常的,可是越往后错位就越大。这是什么原因呢?
参考技术A 应该是内容填充的问题吧,如果数目较大的话把单元格撑大了就可能出现这种情况 参考技术B 生成的组件就不太清楚,你可以看看能不能设置一些属性去解决如果是html的table只要是每一行的列数都一样不会出现这种情况,列的宽度是跟着最大列宽的那一单元格走的 参考技术C 表头前面加回车符,让表头和表体同在一个页面内,自然就能合在一起了如果表体是一个单独的文本框,那就需要你重新制作表头了。。。先在表体上插入一个空白行,然后复制表头行,黏贴到空白行上就行了
在表格主体上插入值后,从表格标题对齐主体
【中文标题】在表格主体上插入值后,从表格标题对齐主体【英文标题】:Align Body from Header of Table after inserting values on table body 【发布时间】:2019-01-16 11:49:48 【问题描述】:问题:
表体内容与表中每一列的表头不对齐。代码:
var test_insert1 = '<tr>' +
'<td class="td-trad-9">762261</td>' +
'<td class="td-trad-7">1.16176</td>' +
'<td class="td-trad-8">1.1618</td>' +
'<td class="td-trad-1">2018-08-08</td>' +
'<td class="td-trad-2">03:32</td>' +
'<td class="td-trad-3">This is a test long value</td>' +
'<td class="td-trad-4">1.00</td>' +
'<td class="td-trad-5">Up</td>' +
'<td class="td-trad-6">0.80</td>' +
'</tr>'+
'<tr>' +
'<td class="td-trad-9">456985</td>' +
'<td class="td-trad-7">1.65476</td>' +
'<td class="td-trad-8">1984218</td>' +
'<td class="td-trad-1">2018-08-08</td>' +
'<td class="td-trad-2">03:32</td>' +
'<td class="td-trad-3">This is a test value</td>' +
'<td class="td-trad-4">10000</td>' +
'<td class="td-trad-5">Up</td>' +
'<td class="td-trad-6">1.00</td>' +
'</tr>';
$('#add').click(function()
$('#new_table_test_body').html(test_insert1);
);
#new_table_test
width: auto;
table-layout: fixed;
border-collapse: collapse;
/* color:white; */
text-align: center;
vertical-align: middle;
#new_table_test tbody::-webkit-scrollbar
width: 0px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
#new_table_test tbody
display: block;
width: 100%;
overflow: auto;
height: 100px;
#new_table_test thead tr
display: block;
#new_table_test thead
background: black;
color: #fff;
#new_table_test th,
#new_table_test td
padding: 5px;
text-align: left;
width: auto;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="new_table_test">
<thead id="new_table_test_header">
<tr>
<th>Header 1</th>
<th>Header Two</th>
<th>Head Three</th>
<th>H4</th>
<th>Header 5</th>
<th>Heads 6</th>
<th>Header seven</th>
<th>Header 8</th>
<th>Header Nine</th>
</tr>
</thead>
<tbody id="new_table_test_body"></tbody>
</table>
<button id="add"> Add Details </button>
-- 编辑--
补充:
条件:
可以滚动表格正文 标题不受滚动影响(已修复) 宽度应根据内容自动调整这也是我关心的更新小提琴:http://jsfiddle.net/9sjyvb5w/50
【问题讨论】:
参考:jsfiddle.net/9sjyvb5w/35 做了很多修改,可能会有帮助。 @AbhishekKumar 您可能想发布答案并详细说明您的更改,这可能对我和其他人都有用 好的,我会这样做的。 【参考方案1】:改变这个:
#new_table_test
width: auto;
table-layout: fixed;
对此:
#new_table_test
width: 1000px;
table-layout: auto;
您还应该从#new_table_test tbody
和#new_table_test thead tr
中删除display: block;
。
here 有更多关于 table-layout
属性的信息。
jsffiddle
jsfiddle with scroll
jsfiddle with fixed header
【讨论】:
感谢您的建议,但我正在寻找一种修复方法,它可以根据内容的长度自动调整宽度,使每列的宽度不同,并将内容显示在一行中。我不想让它固定在 10% 您的解决方案非常出色,但是该解决方案无法按我的预期正常工作。我有 display: 表体上的块的原因是它能够滚动而不完全显示正文的内容。像这样jsfiddle.net/9sjyvb5w/50。你能为此添加额外的修复吗? 您可以将您的表格包裹在div
中并为此设置height
和overflow: auto
。我更新了我的答案,并在我之前的例子中做到了。
我明白了。但是这样做会使标题跟随滚动并且不固定。是否有额外的调整?
使用这个 jquery 插件:github.com/jmosbech/StickyTableHeaders【参考方案2】:
虽然@bahman 的答案看起来不错,但同时我尝试了一些不同的方法与flex property
。
方法:
在数据加载之前,我已经使<thead>
可见,但是在单击按钮时我隐藏了<thead>
,并且只有<tbody>
可见,第一行包含标题值,并相应地设置了第一行以匹配标题。
方法问题:需要更多操作,更复杂的是需要将第一行添加为标题。
var test_insert1 =
'<tr>' +
'<td class="td-trad-9">Header 1</td>' +
'<td class="td-trad-7">Header Two</td>' +
'<td class="td-trad-8">Head Three</td>' +
'<td class="td-trad-1">H4</td>' +
'<td class="td-trad-2">Header 5</td>' +
'<td class="td-trad-3">Header 6</td>' +
'<td class="td-trad-6">Head 45</td>' +
'</tr>'+'<tr>' +
'<td class="td-trad-9">762261</td>' +
'<td class="td-trad-7">1.16176</td>' +
'<td class="td-trad-8">1.1618</td>' +
'<td class="td-trad-1">2018-08-08</td>' +
'<td class="td-trad-2">03:32</td>' +
'<td class="td-trad-3">This is a test long value</td>' +
'<td class="td-trad-6">0.80</td>' +
'</tr>'+
'<tr>' +
'<td class="td-trad-9">456985</td>' +
'<td class="td-trad-7">1.65476</td>' +
'<td class="td-trad-8">1984218</td>' +
'<td class="td-trad-1">2018-08-08</td>' +
'<td class="td-trad-2">03:32</td>' +
'<td class="td-trad-3">This is a test value</td>' +
'<td class="td-trad-6">1.00</td>' +
'</tr>';
$('#add').click(function()
$('#new_table_test_body').html(test_insert1);
$('#new_table_test_header').hide();
);
#new_table_test
width: auto;
table-layout: fixed;
border-collapse: collapse;
/* color:white; */
text-align: center;
vertical-align: middle;
display:flex;
flex-direction: column;
justify-content: center;
#new_table_test_header,
#new_table_test_body
display:flex;
flex-direction: row;
#new_table_test_body > tr:first-child
background: black;
color: white;
font-weight: bold;
#new_table_test tbody::-webkit-scrollbar
width: 0px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
#new_table_test tbody
display: block;
width: 100%;
overflow: auto;
#new_table_test thead tr
display: block;
#new_table_test thead
background: black;
color: #fff;
#new_table_test th,
#new_table_test td
padding: 5px;
text-align: left;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="new_table_test">
<thead id="new_table_test_header">
<tr>
<th>Header 1</th>
<th>Header Two</th>
<th>Head Three</th>
<th>H4</th>
<th>Header 5</th>
<th>Heads 6</th>
<th>Head 45</th>
</tr>
</thead>
<tbody id="new_table_test_body"></tbody>
</table>
<button id="add"> Add Details </button>
【讨论】:
【参考方案3】:将以下内容添加到您的表格 css (#new_table_test):
#new_table_test
display: inline-block;
white-space: nowrap; //prevents word wrapping
....
http://jsfiddle.net/aLevx0tn/
【讨论】:
对不起,我的错。但避免包装的代码是“空白:nowrap”。我想帮你免包装。 :) 没关系以上是关于html表头与表体对不齐的主要内容,如果未能解决你的问题,请参考以下文章