在 table body 上插入值后,将 Body 与 Table 的 Header 对齐
Align Body from Header of Table after inserting values on table body
问题:
- table body 的内容与 table 的每一列的 header 不对齐。
代码:
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>
-- 编辑--
补充:
条件:
- 可以滚动 table body
- Header 不受滚动影响(固定)
- 宽度应根据内容自动调整
这里也更新了 fiddle 我的问题:http://jsfiddle.net/9sjyvb5w/50
改变这个:
#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
属性。
虽然@bahman 的回答看起来不错,但与此同时我尝试了一些不同的方法flex property
。
方法:
在数据加载之前,我已经使 <thead>
可见,但是在单击按钮时我隐藏了 <thead>
,只有 <tbody>
可见,第一行包含 header-values,并相应地设置第一行的样式以匹配 header.
方法问题:
需要更多操作,更复杂,需要将第一行添加为 header。
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>
将以下内容添加到您的 table css (#new_table_test):
#new_table_test{
display: inline-block;
white-space: nowrap; //prevents word wrapping
....
}
问题:
- table body 的内容与 table 的每一列的 header 不对齐。
代码:
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>
-- 编辑--
补充:
条件:
- 可以滚动 table body
- Header 不受滚动影响(固定)
- 宽度应根据内容自动调整
这里也更新了 fiddle 我的问题:http://jsfiddle.net/9sjyvb5w/50
改变这个:
#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
属性。
虽然@bahman 的回答看起来不错,但与此同时我尝试了一些不同的方法flex property
。
方法:
在数据加载之前,我已经使 <thead>
可见,但是在单击按钮时我隐藏了 <thead>
,只有 <tbody>
可见,第一行包含 header-values,并相应地设置第一行的样式以匹配 header.
方法问题:
需要更多操作,更复杂,需要将第一行添加为 header。
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>
将以下内容添加到您的 table css (#new_table_test):
#new_table_test{
display: inline-block;
white-space: nowrap; //prevents word wrapping
....
}