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 中并为此设置heightoverflow: auto。我更新了我的答案,并在我之前的例子中做到了。 我明白了。但是这样做会使标题跟随滚动并且不固定。是否有额外的调整? 使用这个 jquery 插件:github.com/jmosbech/StickyTableHeaders【参考方案2】:

虽然@bahman 的答案看起来不错,但同时我尝试了一些不同的方法与flex property方法: 在数据加载之前,我已经使&lt;thead&gt; 可见,但是在单击按钮时我隐藏了&lt;thead&gt;,并且只有&lt;tbody&gt; 可见,第一行包含标题值,并相应地设置了第一行以匹配标题。

方法问题:需要更多操作,更复杂的是需要将第一行添加为标题。

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表头与表体对不齐的主要内容,如果未能解决你的问题,请参考以下文章

ant-design Table组件错位/对不齐

word中表头与表分离,中间出现大片空白,位置错位

jqgrid v5.0.1 列数多的时候 setGridWidth 表头和内容对不齐

关于jqGrid使用二级表头拖拽导致表头错位问题解决

如何固定table的表头

React使用scroll-x之后导致表头和表内容对不齐