I have a jsfiddle here - https://jsfiddle.net/4eohzxwn/1/
$("div").scroll(function(){
$('.static').css({
"position": "absolute", "top": 0
});
});
I need the left static column to be fixed when the rest of the tabel scrolls.
I think Jquery/javascript is the only option.
Is it possible to keep the red static element in postion and scroll the rest of the table.
I also need to keep the rows height when it scrolls so it doesn't just go to one line
Try this Code
use translate instead of position
$("#wrap").scroll(function(){
var translate = "translate("+this.scrollLeft + "px,0)";
$('.static').css('transform',translate);
});
table{
width: 600px;
}
.static{
border: 1px solid red;
width: 100px;
word-wrap: break-word;
background-color:#fff;
}
.scroll{
border: 1px solid green;
width: 500px;
}
#wrap{
border: 1px solid blue;
width: 400px;
overflow: scroll;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<table>
<tbody>
<tr>
<td class="static">Staticdfxcvzx
cvzxcvzxcv</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
</tbody>
</table>
</div>
Have you looked at this question?
HTML table with horizontal scrolling (first column fixed)
You're using jQuery in your snippet and in the answer there's a link to this plugin that seems to solve your issue, but you can probably achieve what you want with just CSS.
You can do this using simple html and css,no need to write jquery for this.Please refer to my code below.
table{
width: 600px;
}
.static{
border: 1px solid red;
width: 100px;
word-wrap: break-word;
position:absolute;
width:5em;
left:0;
top:auto;
}
.scroll{
border: 1px solid green;
width: 500px;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 5em;
}
#innerdiv {
width: 100%;
overflow-x:scroll;
margin-left: 5em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
<div id="outerdiv">
<div id="innerdiv">
<table>
<tbody>
<tr>
<td class="static">Staticdfxc</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
</tbody>
</table>
</div>
</div>
$("#wrap").scroll(function(){
var translate = "translate("+this.scrollLeft + "px,0)";
$('.static').css('transform',translate);
});
table{
width: 600px;
}
.static{
border: 1px solid red;
width: 100px;
word-wrap: break-word;
}
.scroll{
border: 1px solid green;
width: 500px;
}
#wrap{
border: 1px solid blue;
width: 400px;
overflow: scroll;
position: relative;
}
.static
{
background-color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<table>
<tbody>
<tr>
<td class="static">Staticdfxcvzx
cvzxcvzxcv</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
</tbody>
</table>
</div>
Related
I have two nested tables. One outer table and inside every row of outer table I have inner table. My problem is when I am filtering using searchBox it filters both the tables outer and inner. I don't want to filter my inner table rows. Look at my problem I don't want my inner table to be filtered.
var $rows = $('#top_table tr');
$('#txtsearch').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
tr.top_tr td {
border-bottom: 1px solid black;
min-width: 16%;
}
th {
font: bold 11px"Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
width: 16%;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 0px;
color: #4f6b72;
width: 14%;
}
td:first-child {
border-left: 1px solid #C1DAD7;
}
table {
padding: 0px;
}
#top_table {
padding: 10px;
width: 800px;
}
body {
padding: 10px;
}
.subtable {
width: 100%;
}
.body-td {
border: none;
width: 16%;
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
display: inline;
width: 100%;
float: left;
}
tr.collapse>td {
display: table;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="txtsearch" />
<table id="top_table">
<thead>
<tr>
<th>List Name</th>
<th>No. Records</th>
<th>Avail. Records</th>
<th>Creation Date</th>
<th>Last Used</th>
<th>Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseOne">
<td>LIST NO. 1</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseOne" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseTwo">
<td>LIST NO. 2</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseTwo" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr">
<td>LIST NO. 3</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr>
<td colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Everyone i got an answer which is very much shocking i just focused on what i actually want and that was just to ignore even rows of table that contains inner tables.
And the answer to this is :var rows= $("tr:odd") and then i applied filteration on these rows .:) Thanks for you precious time.
Position sticky doesn't work on mozilla neither in safari browser, but in chrome it's working perfectly. Is anyone there who can help me.. I know it we can make it don't by many others way which is "javaScript" but I don't wanna use javaScript in it.
table thead th { position: -webkit-sticky; position: sticky; top: -1px; background: #ccc;}
.table-div {max-height: 200px; overflow: auto;}
.table-div table td {min-width: 200px;}
<div class="container">
<div class="row nopadding">
<div class="table-div table-responsive">
<table class="table table-bordered">
<thead>
<th>head1</th>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</thead>
<tbody>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Position: sticky is not a standard, so it may works, depending of the browser and the version, or even you need to set some flags in web browser config.
You can check this availavility here:
http://caniuse.com/#feat=css-sticky
As you can see, in known issues:
Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also Firefox bug)
Since its only table elements which aren't responding properly to position: sticky and since it's only the th elements you want to apply to the sticky positioning to, why not build a custom thead and apply position: sticky to that custom thead?
Working Example:
.custom-thead {
position: -webkit-sticky;
position: sticky;
top: -1px;
min-width: 816px;
}
.custom-thead .custom-th {
display: inline-block;
position: relative;
left: 2px;
min-width: 202px;
margin-right: 2px;
background-color: #ccc;
}
.table-div {
max-height: 200px;
overflow: auto;
}
.table-div table td {
min-width: 200px;
height: 50px;
background-color: #eee;
}
.custom-th {
font-weight: bold;
}
.custom-th, td {
text-align: center;
}
<div class="container">
<div class="row nopadding">
<div class="table-div table-responsive">
<div class="custom-thead">
<div class="custom-th">head1</div><div class="custom-th">head1</div><div class="custom-th">head1</div><div class="custom-th">head1</div>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Variations of this has been asked before, but I couldn't find an answer to my specific question. Here goes:
I have a table that I need to be able to sort, using a javascript plugin like ListJS. That's not important, but to be able to I NEED a SINGLE <tr> PER listing.
So my table looks like:
<table>
<tr>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line2">line 2</td>
<td class="line3">line 3</td>
</tr>
</table>
http://jsfiddle.net/t6zadmhd/
What I need is <td class="line2"> and <td class="line3"> placed below the "first line" of <td>'s, making them act as a second and third table-row.
I've tried display:block; and display:table-row; on .line2 and .line3, but as you can see I'm not getting the desired result.
Is this possible?
EDIT: This is my expected DESIGN output: http://jsfiddle.net/op5cb4qt/
The idea is indeed to reset display, you can use the flex boxmodel to entirely break the table-layout:
body {
color: #fff;
}
table,
.line2,
.line3 {
width: 100%;
}
tr {
display: flex;
flex-flow: row wrap;
}
td {
display:block;/* IE fix */
margin: 1px;
}
.line1 {
background: red;
flex: 1;
}
.line2,
.line3 {
background: blue;
}
.line3 {
background: green;
}
<table>
<tr>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line2">line 2</td>
<td class="line3">line 3</td>
</tr>
</table>
http://jsfiddle.net/t6zadmhd/1/
But why not use regular tags if that is not a table ?
to go further with flex, you may read https://css-tricks.com/snippets/css/a-guide-to-flexbox/
tr{display:flex;flex-wrap:wrap;}
.line2, .line3{width:100%;}
<table>
<tr>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line2">line 2</td>
<td class="line3">line 3</td>
</tr>
</table>
You can do that using only display: block; but you must set percent width.
td {
padding: 0;
margin: 0;
}
.line1 {
background: red;
float: left;
display: block;
width: 25%;
}
.line2 {
background: blue;
float: left;
display: block;
width: 100%;
}
.line3 {
float: left;
background: green;
display: block;
width: 100%;
}
There are several ways of accomplishing this. Flex is the most convenient and you are not required to use a table for this. However if you have any older browser requirements flex could limit you, but float can accomplish what you are asking for without the use of flex.
http://jsfiddle.net/eeb03gts/2/
body {
color: #fff;
}
table {
width: 100%;
}
table, tr, td {
box-sizing: border-box;
}
tr {
clear:both;
}
.line1 {
background: #f00;
width: 25%;
float: left;
}
.line2 {
background: #00f;
float: left;
width: 100%;
}
.line3 {
background: #008000;
float: left;
width: 100%;
}
<table>
<tr>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line1">line 1</td>
<td class="line2">line 2</td>
<td class="line3">line 3</td>
</tr>
</table>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have an HTML document which contains tables. Some tables are subtables of other ones. You can have an example here:
HTML :
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
CSS :
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow{
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family: Verdana;
}
td{
width: 100px;
}
.top{
margin-bottom: 10px;
}
.sub1{
display: none;
margin-left: 20px;
margin-bottom: 10px;
}
.sub2{
display: none;
margin-left: 40px;
margin-bottom: 10px;
}
I would like to have only the toplevel tables displayed as default. This can be done with the css property "display: none".
I would like to show the subtables when the user clicks on the upper level table. Any existing jquery script for this ?
Here, I've created a jsfiddle with what you're asking for. You can create as many subtables as you could possibly want, this code will still work, and it's light on the fiddle.
HTML edit: I've surrounded the table you're cascading from, and the tables being cascaded from it in a div tag with the class ". clickable" <div class="clickable">...</div>
CSS edit: I've set all ".clickable" children with the same class (.clickable>.clickable{...}) to display:none;
JS edit: The code is activated when you click on the immediate child table element. It then gets that table's parent and finds its immediate child with the ".clickable" class and slideToggles it (you can set a different effect if you'd like, I assumed that this was the look you wanted)
HTML
<div class="clickable">
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<div class="clickable">
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td>
</tr>
</table>
</div>
</div>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<div class="clickable">
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
</div>
</div>
</div>
<div class="clickable">
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
</div>
</div>
CSS
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow {
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family:Verdana;
}
td {
width: 100px;
}
.top {
margin-bottom:10px;
}
.sub1 {
margin-left: 20px;
margin-bottom:10px;
}
.sub2 {
margin-left: 40px;
margin-bottom:10px;
}
.clickable {
cursor:pointer;
}
.clickable>.clickable {
display:none;
}
JS
$(".clickable").children("table").click(function () {
$(this).parent().children(".clickable").slideToggle();
});
I made a jsFiddle to do this. Is this what you are looking for?
HTML:
<table class='top' id='A'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<table class='sub1 sub_A' id='A1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<table class='sub2 sub_A1'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2 sub_A1'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td></tr>
</table>
<table class='sub1 sub_A' id='A2'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<table class='sub2 sub_A2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
<table class='top' id='G'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<table class='sub1 sub_G'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow{
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family: Verdana;
}
td{
width: 100px;
}
.top{
margin-bottom: 10px;
}
.sub1{
display: none;
margin-left: 20px;
margin-bottom: 10px;
width: 200px;
}
.sub2{
display: none;
margin-left: 40px;
margin-bottom: 10px;
width: 200px;
}
JQuery:
$(document).ready(function() {
var Clicks = [];
function click(id, numClicks) {
this.id = id;
this.numClicks = numClicks;
}
$(".top").click(function() {
var access = -1;
for (var c=0;c<Clicks.length;c++) {
if (Clicks[c].id === this.id) {
Clicks[c].numClicks += 1;
access = c;
c = Clicks.length;
}
}
if (access === -1) {
access = Clicks.length;
Clicks.push(new click(this.id, 1));
}
if (Clicks[access].numClicks % 2 !== 0) {
$((".sub_"+(this.id))).css('display', 'block');
} else {
$((".sub_"+(this.id)+'1')).css("display", "none");
$((".sub_"+(this.id))).css("display", "none");
}
});
$(".sub1").click(function() {
id = this.id;
var access = -1;
for (var c=0;c<Clicks.length;c++) {
if (Clicks[c].id === id) {
Clicks[c].numClicks += 1;
access = c;
c = Clicks.length;
}
}
if (access === -1) {
access = Clicks.length;
Clicks.push(new click(this.id, 1));
}
if (Clicks[access].numClicks % 2 !== 0) {
$((".sub_"+(id))).css('display', 'block');
} else {
$((".sub_"+(id))).css("display", "none");
}
});
});
inside td I am taking a table, but somehow table is not taking the td full height. can any one help me to fix this issue.
html for table:
<table style="height: auto">
<tr>
<td style="background-color: red">
<table style="background-color: orange">
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>
You can't force an object to take up 100% of the height of a cell without writing some JavaScript that will figure out the height of the cell and resize the table programatically.
I'm not really sure what your goal is with this, but you can achieve the look you seem to want by setting the background on the td and set a border to get the red outline.
<table style="height: auto">
<tr>
<td style="background-color: orange; border: solid red 1px">
<table>
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>