I'm trying to add line numbers to existing html with unequal line height - many types of font size and also images.
each line look like -
<div id="1"><right><span>line 1</span></right></div>
<div id="2"><right><span>line 2</span></right></div>
<div id="3"><right><span>line 3</span></right></div>
is there simple way to add line numbers that will be vertically align?
thanks
By inspiring from this question, I have developed a solution for your question. You can use the counter-reset and counter-increment property to achieve this
<html>
<head>
<style>
.container {
counter-reset: line;
}
.container .lineNum {
display: block;
line-height: 1.5rem;
}
.container .lineNum:before {
counter-increment: line;
content: counter(line);
display: inline-block;
margin-right: .5em;
}
</style>
</head>
<body>
<div class="container">
<div id="1" class="lineNum"><right><span>line 1</span></right></div>
<div id="2" class="lineNum"><right><span>line 2</span></right></div>
<div id="3" class="lineNum"><right><span>line 3</span></right></div>
</div>
</body>
</html>
Maybe a little automated paragraph counter.
$(document).ready(function() {
var maxNum = 0;//how many lines should be prepared (Takin in considersation, there would be more wrappers)
$(".NumeredTextBlock").each(function() {//create counter for each .NumeredTextBlock wrapper
var line = 1;//start with number 1
$("p", this).each(function() {//look for paragraph elements inside wrapper
$(this).addClass("line" + line);//add class with line number
line++;
if (maxNum < line) maxNum = line;//set the maximum number of lines used in HTML DOM for wrapper
});
});
var prepStyle = "";//prepare css style with line numbering
while (maxNum--) {//prepare as many styles as the max number in document
prepStyle += ".line" + maxNum + ":before{content:'" + maxNum + "'}";
}
$("#numbers").html(prepStyle);//add prepared styles to the HTML DOM
console.log("resulting generated <style id='numbers'>"+prepStyle+"</style>")
});
.NumeredTextBlock p {
padding-left: 50px;
position: relative;
}
.NumeredTextBlock p:before {
display: block;
position: absolute;
left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="NumeredTextBlock">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
<p>Lorem ipsum dol</p>
<p>Lorem</p>
</div>
<style id="numbers"></style>
if you have requirement listing automatically use <OL> tag
other way is no add deffrent tag like this
div span {
float: right;
}
<ol>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
</ol>
<div id="1"><right>line <span>1</span></right></div>
<div id="2"><right>line <span>2</span></right></div>
<div id="3"><right>line <span>3</span></right></div>
div {
position: relative;
}
div>span:first-of-type {
width: 120px;
display: inline-block;
}
div>span:nth-of-type(2) {
position: absolute;
transform: translate(0, -50%);
top: 50%;
}
td,
div {
border-bottom: 1px solid;
}
td {
vertical-align: middle;
}
<table>
<tr>
<td>Some str length<br/>Some str length</td>
<td>105</td>
</tr>
<tr>
<td>shorter</td>
<td>102</td>
</tr>
</table>
<br/>
<br/>
<div>
<span>Some str length<br/>Some str length</span>
<span>105</span>
</div>
<div>
<span>shorter</span>
<span>102</span>
</div>
Related
I have found how to make non-rectangular shaped text from here (Unusual shape of a textarea?) and it works like a charm.
I need to limit this to 2 lines so I used overflow: hidden; but the area somehow returns to rectangular shape.
This is my html code.
.descTitle {
height: 20px;
width: 70px;
float: left;
border: none;
}
.descContent {
height: 40px;
line-height: 20px;
/*overflow: hidden; /* This breaks the form*/
}
.descOut {
height: 40px;
width: 100%;
}
<tr>
<td colspan=1>
<div class='descOut'>
<div class='descTitle'>
<label for='txt9'><b>Description: </b></label>
</div>
<div class='descContent' contenteditable='true' style='font-color:black; font-size: 11px; font-family:arial'/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>
</td>
</tr>
It works great when I comment out the overflow line but somehow it breaks the form when being used.
Can anyone help me to find out how to limit the contents to 2 lines without breaking unusual shaped text area?
In CSS, I can do something like this:
But I've no idea how to change that to something like:
Is this possible with CSS?
If yes, how can I do it without explicitly specifying the height (let the content grow)?
Grid
Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:
.row {
display: grid;
grid-auto-flow: column;
gap: 5%;
}
.col {
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>
Flexbox
Use Flexbox if you want children to control column width:
.row {
display: flex;
justify-content: space-between;
}
.col {
flex-basis: 30%;
box-sizing: border-box;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>
Give overflow: hidden to the container and large (and equal) negative margin and positive padding to columns. Note that this method has some problems, e.g. anchor links won't work within your layout.
Markup
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
CSS
.container {
overflow: hidden;
}
.column {
float: left;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
The Result
Yes.
Here is the completed CSS the article uses. It is well worth reading the entire article, as the author goes step by step into what you need to make this work.
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
This isn't the only method for doing it, but this is probably the most elegant method I've encountered.
There is another site that is done completely in this manner, viewing the source will allow you to see how they did it.
You can do this easily with the following JavaScript:
$(window).load(function() {
var els = $('div.left, div.middle, div.right');
els.height(getTallestHeight(els));
});
function getTallestHeight(elements) {
var tallest = 0, height;
for(i; i < elements.length; i++) {
height = $(elements[i]).height();
if(height > tallest)
tallest = height;
}
return tallest;
};
You could use CSS tables, like so:
<style type='text/css">
.container { display: table; }
.container .row { display: table-row; }
.container .row .panel { display: table-cell; }
</style>
<div class="container">
<div class="row">
<div class="panel">...text...</div>
<div class="panel">...text...</div>
<div class="panel">...text...</div>
</div>
</div>
Modern way to do it: CSS Grid.
HTML:
<div class="container">
<div class="element">{...}</div>
<div class="element">{...}</div>
<div class="element">{...}</div>
</div>
CSS:
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.element {
border: 2px solid #000;
}
Live example is here.
repeat(auto-fit, minmax(200px, 1fr)); part sets columns width. Every column takes 1 fraction of available space, but can't go less than 200px. Instead of shrinking below 200px it wraps below, so it's even responsive. You can also have any number of columns, not just 3. They'll all fit nicely.
If you need exactly 3 columns, use grid-template-columns: repeat(3, 1fr); instead. You can still have more elements, they will wrap, be responsive, but always be placed in 3 column layout.
More on CSS Grid on MDN or css-tricks.
It's clean, readable, maintainable, flexible and also that simple to use!
You ca try it... it works for me and all browser compatible...
<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>
Another option is to use a framework that has this solved. Bootstrap currently doesn't have an equal height option but Foundation by Zurb does, and you can see how it works here: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
Here's an example of how you'd use it:
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
</div>
<div class="large-6 columns panel" data-equalizer-watch>
</div>
</div>
Basically they use javascript to check for the tallest element and make the others the same height.
So, if you want just css this would add more code, but if you are already using a framework then they have already solved this.
Happy coding.
Use Flexbox to create equal height columns
* {box-sizing: border-box;}
/* Style Row */
.row {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
/* Make the columns stack on top of each other */
.row > .column {
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* When Screen width is 400px or more make the columns stack next to each other*/
#media screen and (min-width: 400px) {
.row > .column {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
}
<div class="row">
<!-- First Column -->
<div class="column" style="background-color: #dc3545;">
<h2>Column 1</h2>
<p>Some Text...</p>
<p>Some Text...</p>
</div>
<!-- Second Column -->
<div class="column" style="background-color: #ffc107;">
<h2>Column 2</h2>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
</div>
<!-- Third Column -->
<div class="column" style="background-color: #007eff;">
<h2>Column 3</h2>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
</div>
</div>
Responsive answer:
CSS flexbox is cute, but cutting out IE9 users today is a little insane. On our properties as of Aug 1 2015:
3% IE9
2% IE8
Cutting those out is showing 5% a broken page? Crazy.
Using a media query the way Bootstrap does goes back to IE8 as does display: table/table-cell. So:
http://jsfiddle.net/b9chris/bu6Lejw6/
HTML
<div class=box>
<div class="col col1">Col 1<br/>Col 1</div>
<div class="col col2">Col 2</div>
</div>
CSS
body {
font: 10pt Verdana;
padding: 0;
margin: 0;
}
div.col {
padding: 10px;
}
div.col1 {
background: #8ff;
}
div.col2 {
background: #8f8;
}
#media (min-width: 400px) {
div.box {
display: table;
width: 100%;
}
div.col {
display: table-cell;
width: 50%;
}
}
I used 400px as the switch between columns and a vertical layout in this case, because jsfiddle panes trend pretty small. Mess with the size of that window and you'll see the columns nicely rearrange themselves, including stretching to full height when they need to be columns so their background colors don't get cut off part-way down the page. No crazy padding/margin hacks that crash into later tags on the page, and no tossing of 5% of your visitors to the wolves.
Here is an example I just wrote in SASS with changeable column-gap and column amount (variables):
CSS:
.fauxer * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.fauxer {
overflow: hidden; }
.fauxer > div {
display: table;
border-spacing: 20px;
margin: -20px auto -20px -20px;
width: -webkit-calc(100% + 40px);
width: -moz-calc(100% + 40px);
width: calc(100% + 40px); }
.fauxer > div > div {
display: table-row; }
.fauxer > div > div > div {
display: table-cell;
width: 20%;
padding: 20px;
border: thin solid #000; }
<div class="fauxer">
<div>
<div>
<div>
Lorem column 1
</div>
<div>
Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
<div>
Lorem column 3
</div>
<div>
Lorem column 4
</div>
<div>
Lorem column 5
</div>
</div>
</div>
</div>
Note: I only found the time to test it in some new browsers. Please test it well before you will use it :)
The editable example in SCSS you can get here: JSfiddle
I have list and a table next to each other, and I want to make the the list elements to be the same height as of that of the table cells with only CSS. Here is my example:
HTML
<div class="main_holder">
<div class="list_table_holder">
<ul>
<li>
<div>
List cell 1
</div>
</li>
<li>
<div>
List cell 2
</div>
</li>
<li>
<div>
List cell 3
</div>
</li>
</ul>
</div>
<div class="table_holder">
<table>
<thead>
<tr>
<td>
<div>
<p>Lorem ipsum dolor sit amet, c</p>
<img src="" alt="Some image" width="200" height="200" />
<strong>Some bold text</strong>
</div>
</td>
<td>
<div>
<p>Lorem ipsum dolor sit amet, c</p>
<img src="" alt="Some image" width="200" height="200" />
<strong>Some bold text</strong>
</div>
</td>
<td>
<div>
<p>Lorem ipsum dolor sit amet, c</p>
<img src="" alt="Some image" width="200" height="200" />
<strong>Some bold text</strong>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo
</div>
</td>
<td>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo
</div>
</td>
<td>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
.main_holder {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.list_table_holder {
width: 210px;
}
.list_table_holder ul {
display: table;
}
.list_table_holder li {
display: table-row;
}
.list_table_holder div {
display: table-cell;
}
.table_holder {
width: calc(100% - 230px);
}
td {
vertical-align: top;
}
strong {
display: block;
}
Here is jsfiddle -> https://jsfiddle.net/wvtze60z/
As I said if possible I would like to resolve this without the use of Javascript/jQuery.
You asked, if possible, if this could be done without JavaScript and the answer is, unfortunately not. Given that the table cells will have variable heights and that they have no direct relationship with the list items, there's no way of doing it with CSS alone.
To give you a simple JavaScript solution, you'd need to load the table rows and list items into collections and then loop through the rows, using their offsetHeight to set the height property of the items.
Note that the below assumes that there is only one list and one table in your HTML. If this is not the case, then you'll need to give IDs to the relevant list and table and adjust this JS accordingly.
var rows=document.getElementsByTagName("tr"),items=document.getElementsByTagName("li"),x=rows.length;
while(x--)
items[x].style.height=parseInt(rows[x].offsetHeight)+"px";
If you want a clean css solution you will have to integrate the list into your table. As described in your comment you want the first column of the table to be fixed. You can achieve this with something like this:
<div id="table-wrapper">
<table>
<tr>
<td class="fixed"> Title </td>
<td> Some Content </td>
<td> Some Content </td>
</tr>
</table>
</div>
Then you need to fix the first td.fixed element with some css:
<style>
.fixed {
position: absolute;
width: 100px;
top: auto;
left: 0;
}
#table-wrapper {
width: 200px;
margin-left: 100px; /* As defined as with for .fixed */
overflow-x:scroll;
overflow-y:visible;
}
</style>
You can find your working jsFiddle here.
Alternativ
If you are willing to use jQuery, you could assign an id to every tr and get their height with something like:
$('#tr1').height();
$('#tr2').height();
and assign these to your table.
If you need further explanation please let me know! Best regards.
Sometimes this is a conveniente behavior, because you dont want to deal with conditionals for printing a tr or a td, or somethimes you are in frameworks like Angular and this is not a choice using something like *ngIf. Therefore, my idea is to create a responsive layout by dividing the width of the items in the percentages, based on the amount of columns you want, e.g. if you want 2 columns then the amount of with per item is about a 50%:
Lets see this in Sass/Scss code
ul.layout {
width: 100%;
padding: 0;
position: relative;
display: flex;
flex-flow: row wrap;
li {
margin-right: 0.8em;
margin-bottom: 0.8em;
width: calc(50% - 0.8em);
display: block;
&.double {
width: calc(100% - 0.8em);
}
}
&.triple {
li {
width: calc(33% - 0.8em);
&.double {
width: calc(66% - 0.8em);
}
&.triple {
width: calc(100% - 0.8em);
}
}
}
}
and the HTML is self-explanatory
<ul class="layout">
<li>
<span class="item">Content A</span>
</li>
<li>
<span class="item">Content B</span>
</li>
<li>
<span class="item">Content C</span>
</li>
<li>
<span class="item">Content D</span>
</li>
<li class="double">
<span class="item">Content E</span>
</li>
</ul>
You can even adapt the CSS to support triple columns by just adding the class triple.
This might be improved for sure, but I think that you get the idea.
I want the byline to appear just below the image.
I am trying to use the right, left, etc properties in relation to the relative property, but the span moves left of the image.
What is the mistake in my code?
<section id="manchanabele">
<img id="club" alt="club" src="images/club.jpg">
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
<span id="byline">by: Lorem Ipsum</span>
</p>
</section>
section#manchanabele {
background: #C8C8C8;
}
#club {
float: right;
width: 75px;
height: 75px;
}
p#lorem {
background: #A0A0A0;
}
span#byline {
position: relative;
float: right;
}
You are structuring your DOM in a wrong way, you should wrap the elements you want to float in a single container. I will provide you the code which will result you in something like below
Here, in the code below, I will explain you related to the image above, the black border container is .wrap, the one which is having green border is the paragraph, which is p, the red on is the container which you are floating to the right which is .right_float and the nested elements inside red element is your img and span respectively.
For example
<div class="wrap">
<p>Hello</p>
<div class="right_float">
<img src="#" />
<span>Hello</span>
</div>
</div>
.wrap {
overflow: hidden; /* Clears float */
}
.wrap p {
float: left;
width: /*Some fixed width*/
}
.wrap .right_float {
float: right;
width: /* Some fixed width */
}
.wrap .right_float span {
display: block;
}
Note, if you don't care about the older versions, especially IE, I would recommend you to use a self clearing parent class
.clear:after {
clear: both;
display: table;
content: "";
}
Now, you can call the above class on your parent element holding floated elements, and you don't have to use overflow: hidden;
You could keep the byline aligned with the image by wrapping the elements in a container such as a DIV.
HTML:
<section id="manchanabele">
<div id="align">
<img id="club" alt="club" src="images/club.jpg">
<span id="byline">by: Lorem Ipsum</span>
</div>
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
</p>
</section>
CSS:
section#manchanabele {
background: #C8C8C8;
}
#align {
float:right;
width:75px;
}
#club {
width: 75px;
height: 75px;
}
p#lorem {
background: #A0A0A0;
}
N.B. You may want to consider using classes rather the IDs if you need to use this layout several times for similar content.
Use this markup:
<article>
<div class="clearfix">
<img src="http://lorempixel.com/70/70" alt="a random image" class="thumb" >
<p>The quick brown fox jumps over all the messy markup and writes a new one.</p>
</div>
<footer>By The Fox</footer>
</article>
Fiddle: http://jsfiddle.net/C5GkH/1/
or if you need the image and the byline always one below the other keeping a blank sidebar on the right follow the advice of #Mr. Alien
Try to clear:both; after the image.
Like so
<section id="manchanabele">
<img id="club" alt="club" src="images/club.jpg">
<div style="clear:both;></div>
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
<span id="byline">by: Lorem Ipsum</span>
</p>
</section>
Also avoid floating inline elements. Better if you wrapped that image with a div and then floated the div.
I'd like to create some "table rows" using <div> and <span>. (Why not use actual table rows? Because I want to set rounded corners on each table row using the awesome jquery corner plugin, and it doesn't seem to like table rows.)
I'd like three-cell rows, with LH and RH cells of fixed width, and a central cell of fluid width, in which the text should wrap.
[fixedwidth][wrapwrapwrapwrap ][fixedwidth]
[fixedwidth][wrapwrapwrapwrapwrapwrapwr][fixedwidth]
apwrapwrapwrapwrapwrapwr
[fixedwidth][wrapwrapwrapwrap ][fixedwidth]
This is what I have so far, but it's disastrously wrong:
<html>
<head>
<style>
.table-row {
width:100%;
}
.cell1 {
float: left;
width: 200px;
}
.cell2 {
float: left;
}
.cell3 {
float: right;
width: 200px;
}
</style>
</head>
<body>
<div class='table-row'>
<span class="cell1">Title</span>
<span class="cell2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
<span class="cell3">Available</span>
</div>
</body>
</html>
The central text doesn't wrap, and pushes down onto the next line.
Please could anyone advise?
Try this:
<style>
.table-row {
display: table-row;
}
.cell1, .cell2, .cell3 {
display: table-cell;
}
.cell1, .cell3 {
width: 200px;
}
</style>
First of all, it doesn't make sense to float inline elements. Secondly, that's not how you create a liquid column.
Try these changes:
<div class="cell1">Title</div>
<div class="cell3">Available</div>
<div class="cell2">consequat.</div>
and
.cell2 {
margin-left: 200px;
margin-right: 200px;
}
Note: If you add padding/borders/margins to the cells don't forget to add the sum of the sizes to margin-left and margin-right for cell2.
Can't you just add divs and spans inside regular table cells?
Edit:
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>