在表格主体上插入值后,将表格标题与表格标题对齐

时间:2018-08-09 06:01:56

标签: javascript html css html-table css-tables

问题:

  • 表主体的内容未与表的每一列的标题对齐。

代码:

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

3 个答案:

答案 0 :(得分:1)

更改此内容:

#new_table_test {
  width: auto;
  table-layout: fixed;
}

对此:

#new_table_test {
  width: 1000px;
  table-layout: auto;
}

此外,您还应该从display: block;#new_table_test tbody中删除#new_table_test thead tr

关于table-layout属性的更多信息here

jsffiddle

jsfiddle with scroll

jsfiddle with fixed header

答案 1 :(得分:1)

尽管@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>

答案 2 :(得分:0)

将以下内容添加到表CSS(#new_table_test):

#new_table_test{
    display: inline-block;
    white-space: nowrap; //prevents word wrapping
    ....
}

http://jsfiddle.net/aLevx0tn/