I am trying to add tooltips to a scrollable table that has fixed headers and left columns. When I add the tooltip the cell no longer hides behind the fixed headers and columns when the table is scrolled.
<HTML>
<HEAD>
<STYLE>
.gradebooktable {
overflow: auto;
height: 100px;
width: 400px
}
table {
table-layout: fixed;
border-width: 0;
border-spacing: 0;
}
td {
padding: 3px;
white-space: nowrap;
border-right: 1px solid #ccc;
}
th {
background: #999;
}
th.pinned {
position: relative;
z-index: 20;
background: #ccc;
}
td.pinned {
background: #eee;
}
.tooltip{
position:relative;
}
.tooltipcomment{
display:none;
position:absolute;
z-index:10;
border:1px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:blue;
padding:3px;
color:red;
top:20px;
left:20px;
}
.tooltip:hover span.tooltipcomment{
display:block;
}
</style>
</STYLE>
</HEAD>
<BODY>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<SCRIPT>
$( function() {
$('#gradebooktable').scroll( function() {
var translate = "translate(0," + this.scrollTop + "px)";
$("table thead th:not(.pinned)").css('transform', translate);
translate = "translate(" + this.scrollLeft + "px,0)";
$("table tbody .pinned").css('transform', translate);
translate = "translate(" + this.scrollLeft + "px," + this.scrollTop + "px)";
$("table thead th.pinned").css('transform', translate);
}
);
});
</SCRIPT>
<div id="gradebooktable" class="gradebooktable">
<table>
<thead>
<tr>
<th class="pinned">Col 0</th>
<th class="pinned">Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td class="tooltip">Another Cell
<span class="tooltipcomment">Here is a comment</span></td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
</tbody>
</table>
</div>
</BODY>
</HTML>
There is a fiddle showing the problem here:
https://jsfiddle.net/6jh60sgs/9/
What do I need to do to make the cell with the tooltip scroll behind the fixed headers and columns?
I fixed it: https://jsfiddle.net/k42myms3/1/
.gradebooktable {
overflow: auto;
height: 200px;
width: 400px
}
table {
table-layout: fixed;
border-width: 0;
border-spacing: 0;
}
td {
position:relative;
padding: 3px;
white-space: nowrap;
border-right: 1px solid #ccc;
}
th {
position:relative;
z-index:20;
background: #999;
}
th.pinned {
position: relative;
z-index: 40;
background: #ccc;
}
td.pinned {
position: relative;
z-index: 30;
background: #eee;
}
.tooltip{
position:relative;
}
.tooltiptext{
display:none;
position:absolute;
z-index:10;
border:1px;
background-color:#eee;
border-style:solid;
border-width:1px;
border-color:blue;
border-radius: 6px;
padding:3px;
color:blue;
top:20px;
left:20px;
}
.tooltip:hover span.tooltiptext{
display:block;
}
try this instead, i've tested on your code before and working
just change your tooltip class
like this
.tooltip{
position:relative;
display: none;
}
Related
So I am having issues converting my responsive carousel table from individual tables to a single table, any help would be much appreciated.
<table class="table-head">
<thead>
<th>Head</th>
</thead>
<tbody>
<tr>
<td>Attr1</td>
</tr>
<tr>
<td>Attr2</td>
</tr>
<tr>
<td>Attr3</td>
</tr>
<tr>
<td>Attr4</td>
</tr>
</tbody>
</table>
<div class="table-scroll carousel">
<table class="carousel-cell">
<th>Title1</th>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title2</th>
<tr>
<td>21</td>
</tr>
<tr>
<td>22</td>
</tr>
<tr>
<td>23</td>
</tr>
<tr>
<td>24</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title3</th>
<tr>
<td>31</td>
</tr>
<tr>
<td>32</td>
</tr>
<tr>
<td>33</td>
</tr>
<tr>
<td>34</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title4</th>
<tr>
<td>41</td>
</tr>
<tr>
<td>42</td>
</tr>
<tr>
<td>43</td>
</tr>
<tr>
<td>44</td>
</tr>
</table>
</div>
To then turn it into something like this
<div class="table-scroll carousel">
<table class="table-head">
<tr class="carousel-cell">
<th>Date</th>
<td>2021</td>
<td>01 June</td>
<td>05 June</td>
<td>05 June</td>
<td>08 June</td>
<td>10 June</td>
<td>16 June</td>
<td>24 June</td>
<td>25 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Details</th>
<td> </td>
<td>Bal b/f</td>
<td>Cheque no 816078</td>
<td>Bank Giro credit</td>
<td>Bank Giro credit</td>
<td>Cheque no 816079</td>
<td>Direct debit</td>
<td>Bank charges</td>
<td>Direct debit</td>
<td>Cheque no 816081</td>
<td>SO payment</td>
<td>BACS payment</td>
<td>CHAPS payment</td>
<td>Interest</td>
</tr>
<tr class="carousel-cell">
<th>Debit</th>
<td>£</td>
<td> </td>
<td>800</td>
<td> </td>
<td> </td>
<td>1,864</td>
<td>700</td>
<td>52</td>
<td>400</td>
<td>1,290</td>
<td>300</td>
<td>100</td>
<td>70</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Credit</th>
<td>£</td>
<td> </td>
<td>2,000</td>
<td>2,500</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20</td>
</tr>
<tr class="carousel-cell">
<th>Balance</th>
<td>£</td>
<td>8,196 C</td>
<td>7,396 C</td>
<td>9,396 C</td>
<td>12,896 C</td>
<td>11,032 C</td>
<td>10,332 C</td>
<td>10,280 C</td>
<td>9,880 C</td>
<td>8,590 C</td>
<td>8,290 C</td>
<td>8,190 C</td>
<td>8,120 C</td>
<td>8,140 C</td>
</tr>
</table>
</div>
The CSS for both looks like this
.table-head {
float: left;
width: 80px;
border-right: 2px solid #333;
border-collapse: collapse
}
.table-scroll {
float: left;
width: calc(100% - 81px);
border-top: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background-color: #AAA;
}
.table-scroll table {
margin-top: -1px;
width: 30%;
min-width: 300px;
max-width: 40%;
border-collapse: collapse;
}
th {
text-align: left;
background-color: #f2f2f2;
color: #0076BF;
}
th, td {
padding: 10px;
border: 1px solid #333;
background-clip: padding-box;
}
td {
background-color: #fff;
}
And the flickity config
var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
// options
freeScroll: true,
contain: true,
prevNextButtons: false,
groupCells: true,
cellAlign: 'left'
});
Both are displayed on codepen, multiple tables https://codepen.io/joshuaserpis/pen/ZEojLKR
Single table https://codepen.io/joshuaserpis/pen/oNoOgYN
I want to make a table in html that will be like this:
<style>
BODY { color: black; background-color: white; font-family: Verdana, Arial, Helvetica; font-size: 80% }
TH { font-size: 80% }
TD { font-size: 80% }
TD.Layout { background-color: white}
TH.Title { background-color: #A0E0A0}
TD.Item { background-color: #E8E8E8}
</style>
<TABLE border ="1" cellspacing ="2" cellpadding ="6">
<TR>
<TH class="Title" rowspan = 2>Name</TH>
<TH class="Title" align="center" colspan = 2>2017 statistics</TH>
<TH class="Title" align="center" colspan = 2>2018 statistics</TH>
</TR>
<TR>
<TH class="Title" align="center">Value 1</TH>
<TH class="Title" align="center">Value 2</TH>
<TH class="Title" align="center">Value 1</TH>
<TH class="Title" align="center">Value 2</TH>
</TR>
<TR>
<TH class="Title" align="center">John</TH>
<TD class="Item" align="center">1</TD>
<TD class="Item" align="center">2</TD>
<TD class="Item" align="center">3</TD>
<TD class="Item" align="center">4</TD>
</TR>
<TR>
<TH class="Title" align="center">George</TH>
<TD class="Item" align="center">5</TD>
<TD class="Item" align="center">6</TD>
<TD class="Item" align="center">7</TD>
<TD class="Item" align="center">8</TD>
</TR>
</TABLE>
The point is that in every year there will be 5 or 6 subcolumns and I want to group them somehow in order to be easier for somebody to look at the table and understand which subcolumn belongs to every year without looking the header every time. A nice solution could be different border color for every year.
Two easy solutions that I can think of are:
Styling based on year.
<style>
BODY { color: black; background-color: white; font-family: Verdana, Arial, Helvetica; font-size: 80% }
TH { font-size: 80% }
TD { font-size: 80% }
TD.Layout { background-color: white}
TH.Title { background-color: #A0E0A0}
TD.Item { background-color: #E8E8E8}
.Year2017 {background-color: #145214}
.Year2018 {background-color: #000080}
</style>
<TABLE border ="1" cellspacing ="2" cellpadding ="6">
<TR>
<TH class="Title" rowspan = 2>Name</TH>
<TH class="Year2017" align="center" colspan = 2>2017 statistics</TH>
<TH class="Year2018" align="center" colspan = 2>2018 statistics</TH>
</TR>
<TR>
<TH class="Year2017" align="center">Value 1</TH>
<TH class="Year2017" align="center">Value 2</TH>
<TH class="Year2018" align="center">Value 1</TH>
<TH class="Year2018" align="center">Value 2</TH>
</TR>
<TR>
<TH class="Title" align="center">John</TH>
<TD class="Year2017" align="center">1</TD>
<TD class="Year2017" align="center">2</TD>
<TD class="Year2018" align="center">3</TD>
<TD class="Year2018" align="center">4</TD>
</TR>
<TR>
<TH class="Title" align="center">George</TH>
<TD class="Year2017" align="center">5</TD>
<TD class="Year2017" align="center">6</TD>
<TD class="Year2018" align="center">7</TD>
<TD class="Year2018" align="center">8</TD>
</TR>
</TABLE>
CSS tooltip. Tooltip can represent the year and hence we don't need to look at header for year value.
For reference: https://www.w3schools.com/css/css_tooltip.asp
<div class="row" style="border:1px solid black;">
<table class="table table-condensed" >
<thead style="border: 1px solid black;">
<tr>
<th class="text-left" width="5%" style="border-left:1px solid black;">Sl no</th>
<th class="text-center" style="border-left:1px solid black;">Account</th>
<th class="text-center" style="border-left:1px solid black;">Partner</th>
<th class="text-center" style="border-left:1px solid black;">Internal Reference</th>
<th class="text-center" style="border-left:1px solid black;">Description</th>
<th class="text-center" style="border-left:1px solid black;">Debit Amount(AED)</th>
<th class="text-center" style="border-left:1px solid black;">Credit Amount(AED)</th>
</tr>
</thead>
<tbody style="border-bottom: 1px solid black;">
<t t-set="count" t-value="1"/>
<tr t-foreach="o.line_ids" t-as="l" style="border-top: 1px solid black;">
<td class="text-left" width="5%"><span t-esc="count"/> <t t-set="count" t-value="count + 1"/></td>
<td class="text-left" style="border-left:1px solid black;"><span t-field="l.account_id.name"/></td>
<td class="text-left" style="border-left:1px solid black;"><span t-field="l.partner_id"/></td>
<td class="text-left" style="border-left:1px solid black;"><span t-field="l.account_id.code"/></td>
<td class="text-left" style="border-left:1px solid black;"><span t-field="l.name"/></td>
<td class="text-right" style="border-left:1px solid black;"><span t-field="l.debit"/></td>
<td class="text-right" style="border-left:1px solid black;"><span t-field="l.credit"/></td>
</tr>
<tr>
<td style="display:inline;border-left:1px solid black;border-top:1px solid black;">
<span t-if="o.ref">
<span>Reference:</span><span><span t-field="o.ref"/></span>
</span>
</td>
<td style="border-top:1px solid black;">
</td>
<td style="border-top:1px solid black;">
</td>
<td style="border-top:1px solid black;">
</td>
<td style="border-top:1px solid black;">
</td>
<td style="border-top:1px solid black;">
</td>
<td style="border-top:1px solid black;">
</td>
</tr>
</tbody>
</table>
</div>
Hi above is my xml code . Problem I face is that I cannot set a width for the column Sl No I tried by putting width="5%" in th and td and I also tried putting it in style like style="width:5%" but that also does n't work. Please Help .
Thanks in advance...
The width of th will be set correctly. The issue should be in the value of width, 5% is maybe not enough to show Sl No on the same line.
Try
<tr>
<td colspan="7" style="display:inline;border-left:1px solid black;border-top:1px solid black;">
<span t-if="o.ref">
<span>Reference:</span><span><span t-field="o.ref"/></span>
</span>
</td>
</tr>
is there a way to repeat 2 elements with one v-for without extra element/container?
what I want to achieve is like this:
table{
border-collapse: collapse;
}
td{
border: 1px solid #999;
}
<table>
<tr><td rowspan="2">itteration 1</td><td>value 1</td></tr>
<tr><td>value 2</td></tr>
<tr><td rowspan="2">itteration 2</td><td>value 1</td></tr>
<tr><td>value 2</td></tr>
<tr><td rowspan="2">itteration 3</td><td>value 1</td></tr>
<tr><td>value 2</td></tr>
<tr><td rowspan="2">and so on</td><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>
if I use code like below
<tr v-for="(i, k) in items" :key="k">
<td rowspan="2">itteration {{ k + 1 }}</td>
<td>value 1</td>
</tr>
<tr v-for="(i, k) in items" :key="k">
<td>value 2</td>
</tr>
I got a result like this
table{
border-collapse: collapse;
}
td{
border: 1px solid #999;
}
<table>
<tr><td roswpan="2">itteration 1</td><td>value 1</td></tr>
<tr><td roswpan="2">itteration 2</td><td>value 1</td></tr>
<tr><td roswpan="2">itteration 3</td><td>value 1</td></tr>
<tr><td>value2</td></tr>
<tr><td>value2</td></tr>
<tr><td>value2</td></tr>
</table>
of-course I could use code like this
<tbody v-for="(i, k) in items" :key="k">
<tr>
<td rowspan="2">itteration {{ k + 1 }}</td>
<td>value 1</td>
</tr>
<tr>
<td>value 2</td>
</tr>
</tbody>
but I want to avoid that if possible.
any ideas?
In Vue 3, it is now possible for a component to have multiple root nodes, so you can use something like this:
const Example = {
props: ["iteration"],
template: `
<tr>
<td rowspan="2">iteration {{ iteration }}</td>
<td>value 1</td>
</tr>
<tr>
<td>value 2</td>
</tr>
`
};
const App = {
components: {
Example
},
data() {
return {
items: ["foo", "bar", "baz"]
}
},
template: `<Example v-for="(i, k) in items" v-bind:iteration="k" />`
};
Vue.createApp(App).mount("#app");
table {
border-collapse: collapse;
}
td {
border: 1px solid #999;
}
<script src="https://unpkg.com/vue#3.0.0-beta.14/dist/vue.global.prod.js"></script>
<div id="app"></div>
In Vue 2 (tested on 2.5.13), you can use a <template> element with v-for, which can contain more than one child:
new Vue({
el: '#root',
data() {
return {
items: ["foo", "bar", "baz"]
}
}
});
table {
border-collapse: collapse;
}
td {
border: 1px solid #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="root">
<table>
<template v-for="(i, k) in items">
<tr>
<td rowspan="2">iteration {{ k + 1 }}</td>
<td>value 1</td>
</tr>
<tr>
<td>value 2</td>
</tr>
</template>
</table>
</div>
I have a table with two rows of headings. I want to set the widths of some of the columns in the second row. I set up a Codepen to test it out. I find that if I remove the first row of headings, it takes the column widths I've specified without a problem. But with the first row of headings, it ignores the widths of the columns in the second row. :(
Please note that I have div's within the th's so I can style the borders.
Here's the Code:
body {
padding: 10px;
}
.data-table {
width: 100%;
border-spacing: 0 4px;
border-collapse: separate;
table-layout: fixed;
}/* Remove For SCSS*/
.title-11, .title-21 {
width: 40px;
}
.title-22 {
width: 100px;
}
.title-24 {
width: 100px;
}
thead tr th {
border-collapse: separate;
border-spacing: 0 5px;
}
.title {
/*
background: linear-gradient(to right, transparent 0%, #bbb 0%,
#bbb calc(100% - 10px),
transparent calc(100% - 10px)) 0 99% / 100% 1px
no-repeat;
*/
text-align: left;
padding-right: 10px;
}
.div-title {
border-bottom: 1px solid #bbb;
}
.hdr-field {
width: 150px;
}
tr .title:last-child {
padding-right: 0;
}
.side-title {
transform: rotate(-90deg);
width: 25px;
}
.fieldname {
width: 130px;
}
.fieldvalue.dest-data input[type=text] {
width: 100%;
}
.bodySection {
border-bottom: 10px solid #bbb;
margin-bottom: 10px;
}
tr {
// border-bottom: 10px solid #bbb;
}
/*}*//* For SCSS*/
<table class="data-table">
<thead>
<tr>
<th class="title-11"></th>
<th colSpan="2" class="title title-12">
<div class="div-title">Source</div>
</th>
<th colSpan="2" class="title title-13">
<div class="div-title">Destination</div>
</th>
</tr>
<tr>
<th class="title-21"></th>
<th colSpan="1" class="fieldname title title-22">
<div class="div-title hdr-field">Field</div>
</th>
<th colSpan="1" class="title title-23">
<div class="div-title">Value</div>
</th>
<th colSpan="1" class="fieldname title title-24">
<div class="div-title hdr-field">Field</div>
</th>
<th colSpan="1" class="title title-25">
<div class="div-title">Value</div>
</th>
</tr>
</thead>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name</td>
<td class="fieldname src-data">Short Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
</tbody>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name2</td>
<td class="fieldname src-data">Short Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
</tbody>
</table>
So just to clarify: the question is how to make the Field columns fixed width, while leaving the Value columns to find their own level.
Thank you.
I can't quite understand why and how table lay-outs are calculated, because the algorythm seems pretty complex.
However, you can achieve the desired lay-out by using a good ol' <colgroup>.
There's some not-too-hard to digest info about how to use them in the HTML4 spec | Calculating column width. Note that this also holds true for the new spec (col and colgroup are not deprecated).
Stick this in between <table> and <thead> in your fiddle:
<colgroup>
<col>
<col width="150">
<col>
<col width="150">
<col>
</colgroup>
DEMO working:
body {
padding: 10px;
}
.data-table {
width: 100%;
border-spacing: 0 4px;
border-collapse: separate;
table-layout: fixed;
}/* Remove For SCSS*/
.title-11, .title-21 {
width: 40px; /* Wont be applied */
}
.title-22 {
width: 100px; /* Wont be applied */
}
.title-24 {
width: 100px; /* Wont be applied */
}
thead tr th {
border-collapse: separate;
border-spacing: 0 5px;
}
.title {
/*
background: linear-gradient(to right, transparent 0%, #bbb 0%,
#bbb calc(100% - 10px),
transparent calc(100% - 10px)) 0 99% / 100% 1px
no-repeat;
*/
text-align: left;
padding-right: 10px;
}
.div-title {
border-bottom: 1px solid #bbb;
}
.hdr-field {
width: 150px;
}
tr .title:last-child {
padding-right: 0;
}
.side-title {
transform: rotate(-90deg);
width: 25px;
}
.fieldname {
width: 130px;
}
.fieldvalue.dest-data input[type=text] {
width: 100%;
}
.bodySection {
border-bottom: 10px solid #bbb;
margin-bottom: 10px;
}
tr {
// border-bottom: 10px solid #bbb;
}
/*}*//* For SCSS*/
<table class="data-table">
<colgroup>
<col width="40">
<col width="100">
<col>
<col width="100">
<col>
</colgroup>
<thead>
<tr>
<th class="title-11"></th>
<th colSpan="2" class="title title-12">
<div class="div-title">Source</div>
</th>
<th colSpan="2" class="title title-13">
<div class="div-title">Destination</div>
</th>
</tr>
<tr>
<th class="title-21"></th>
<th class="fieldname title title-22">
<div class="div-title hdr-field">Field</div>
</th>
<th class="title title-23">
<div class="div-title">Value</div>
</th>
<th class="fieldname title title-24">
<div class="div-title hdr-field">Field</div>
</th>
<th class="title title-25">
<div class="div-title">Value</div>
</th>
</tr>
</thead>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name</td>
<td class="fieldname src-data">Short Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
</tbody>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name2</td>
<td class="fieldname src-data">Short Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
</tbody>
</table>