I am currently using EvoPDF (HTML to PDF) to build up a report in C#.
In this report we have a table, looking something like this in the fiddle:
http://jsfiddle.net/bk48srw1/3/
with the important part:
<tr>
<td>label for something</td>
<td style="position:relative;" rowspan="99999">
<div id="absolute">
<div class="centerd">
<span>value for all</span>
</div>
</div>
</td>
</tr>
The idea is that there are a variety of products, but they will have the same value in the second column, hence:
rowspan="99999"
The client wants the styling (border and background) to span the height of the second column, with the text in the middle. I have tried the position absolute, display:table, as well as vertical-align.
I cannot use a solution like Vertically align text in a span with fixed width and height
because I have no idea what the height would be (there could be an arbitrary number of tr's)
How do I make the div 100% height of the td, with the text displaying in the middle?
My preference is not to use JS, seeing that this code doesn't see a browser at all.
For styling purposes, I need to have about 3px padding inbetween the td and the div, seeing that I cannot add cellspacing to only 1 td.
Used to this change your html as like this
td{
width:50%;vertical-align:middle;
}
<table style="width:100% ">
<tr>
<td>
<table>
<tr><td>label for something</td></tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
</table>
</td>
<td style="background:yellow; border: 1px solid black;text-align:center;">
<table width="100%">
<tr><td>value for all</td></tr>
</table>
</td>
</tr>
</table>
Here you go: http://jsfiddle.net/sjncndvn/2/
HTML markup:
<table style="width:100% ">
<tr>
<td>label for something</td>
<td style="position:relative;" rowspan="99999">
<div id="absolute">
<div class="centerd">
<span>value for all</span>
</div>
</div>
</td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
</table>
CSS:
td{
width:50%;
display:table-cell ;
vertical-align:middle ;
}
#absolute {
width:100%;
background:yellow;
display:table;
border: 1px solid black;
}
.centerd {
display:table-cell;
vertical-align:middle;
text-align:center;
background-color:#pink;
}
Since #absolute no longer uses absolute positioning, you may want to change the ID name to something else.
Related
I have an image on the upper left of the screen but want to position some text on the evenly opposite side (upper right). But this code positions the subsequent td elements only slightly to the right and a bit lower. Do I need to add an align to the <td> elements?
<table>
<tr>
<td><img src="some_img" style='width:50%; height:50%;' />
<td style="vertical-align:bottom;">t1</td>
</tr>
<tr>
<td></td>
<td>t2</td>
</tr>
<tr>
<td></td>
<td>t3</td>
</tr>
</table>
One closing td is missing, other than that you can use the text-align css property to align the items inside the cell.
If I understand correctly, you may want something like this:
.cell{
width: 50vw;
background: #ccc;
text-align: right;
}
.image{
width:50%;
height:50%;
text-align: left;
}
<table>
<tr>
<td class="cell image"><img src="some_img"/></td>
<td class="cell">t1</td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell">t2</td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell">t3</td>
</tr>
</table>
I got a table with a couple <td>:
<table>
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px;">
<div>
Third
</div>
</td>
</tr>
</table>
What I want to do is to place the "Third" <td> (with the div) to the right side of the table and the "First" and "Second" <td> should stay left.
Style with float:right; didn't work for me...
You need to make your table's width 100%, then control the widths of your first 2 columns, and finally right-align your third column.
http://jsfiddle.net/25Mqa/1/
<table>
<tr>
<td class="first">First</td>
<td class="second">Second</td>
<td class="third">Third</td>
</tr>
</table>
CSS:
table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }
The problem is that the width of a <table> is determined by its content, by default. If you want the <table> to span 100% width (of its containing block) like block-level elements do, you can either add table-layout: fixed; and then specify your width - or just give it a width, depending on what you're after, e.g.
table {
width: 100%;
}
http://jsfiddle.net/QEaAd/2/
try add style="text-align:right;"
<table>
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px; text-align:right;">
<div>
Third
</div>
</td>
</tr>
</table>
Only if you have 2 divs one near other:
<div id="fr">div1</div>
<div id="fr">div2</div>
you can float them right:
<style>
#fr{float:right;}
</style>
<table style="width: 100%;">
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px; display: block; float: right;">
<div>
Third
</div>
</td>
</tr>
</table>
http://jsfiddle.net/pbesD/
I believe this does what you want, however from what I understand, floating table elements will cause problems in versions of Internet Explorer <8
I dont know what you are trying to do with tables and divs? But I normally use this for emailers.
I use the align attribute for td's. This helps a lot in making sure your layout looks the way you want. And it works in all browsers :)
FIDDLE
HTML:
<table width="100%">
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px;" align="right">
<div>
Third
</div>
</td>
</tr>
</table>
In Bootstrap 5.2 you can add .text-start and .text-end to your text class to align elements inside a table.
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/
I am struggling with this problem for quite a while now and can't find a proper solution to my problem.
What I have:
<div style="width:150px; border:1px solid #000;overflow: auto;">
<div>SOME TEXT</div>
<table style="width:100%; border:1px solid #0F0;">
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
</tr>
<tr>
<td colspan="3">
<div style="overflow: auto; border:1px solid #F00;">
<table>
<tr>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
</tr>
<tr>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
http://jsfiddle.net/37ExS/
Explanation:
The outer div represents my content wrapper with a fixed with, which contains some other divs and a table with data.
Inside of the data table is a row, which contains another table with detailed data in reference to the row above it.
What I want:
The table cell, which currently has a colspan of "3", containing the detail table should have it's overflowing content creating a scrollbar. Which is why I wrapped the content in another div, but it seems like the div's width is determined by it's content, rather than by it's parents (TD) width. setting a fixed width for the inner div works, but I want it dynamically, since I really don't know the width of the content wrapper.
I hope that was understandable.
UPDATE:
This is how it should behave:
http://jsfiddle.net/eRA33/
I could use that and be fine about it, but I really don't know the cross-browser support and it looks a bit hacky to me, would be nice, if someone has a nicer way of doing that.
The problem is that you can't use the overflow property on the table element. A nicer way of doing it (in my opinion), is to add tbody tags and set them as display: block. This lets them scroll. This also avoids using a bunch of wrapper divs.
Don't worry about using table-layout; it's well supported.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Here's a small fiddle to demonstrate. I put your styles in the style section, as it was easier for me to work that way :)
http://jsfiddle.net/eRA33/2/
HTML
<div class="wrapper">
<div>SOME TEXT</div>
<table class="table-scroll table-data">
<tbody>
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
<td>HEAD4</td>
</tr>
<tr>
<td colspan="4">
<table class="table-scroll table-detail">
<tbody>
<tr>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
</tr>
<tr>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
CSS
.wrapper {
width:180px;
border:1px solid #000;
}
.table-scroll {
width:100%;
table-layout: fixed;
}
.table-scroll tbody {
display:block;
overflow:scroll;
}
.table-data {
border:1px solid #0F0;
}
.table-detail {
border:1px solid #F00;
}
<table>
<tr>
<td>4px</td>
<td>4px</td>
<td>4px</td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr>
<td>4px</td>
<td>4px</td>
<td>4px</td>
</tr>
</table>
I can't set the td's to 4px height using CSS.
Firstly, you cannot define a css class that starts with a number. Your rules dont apply because you set a class of "4px". Please validate.
Secondly, define a font-size so the font doesn't exceed four pixels.
Thirdly, if this isn't tabular data do not use a table for the job. See http://www.hotdesign.com/seybold/
HTML:
<table cellspacing="0" cellpadding="0" width="100%">
<tr class="four-px">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr class="four-px">
<td></td>
<td></td>
<td></td>
</tr>
</table>
CSS:
table, tr, td { background:#dd0;}
tr.four-px { height:4px; }
tr.four-px td { background:#ff9; font-size:4px; line-height:1; }
Live Demo: http://jsfiddle.net/D9pm9/11/
Live Demo with text inside rows: http://jsfiddle.net/D9pm9/12/
set the row's height.
<td>style="height:4px;"</td>
or...
<table>
<tr>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
</tr>
</table>
/* style sheet */
.smallCell
{
height: 4px;
}
They won't shrink to 4px if you have text or some other element inside them which is too large though.
TD's always expand to accommodate the content. So if your TD is to be 4px, your content inside will have to be 4px or less as well.
Consider TD dimensions as min-width/min-height in concept.
I don't think you can size a row to 4px if there is text in it.
You can, however, resize the text inside the td itself to shrink the cells:
<table>
<tr>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
</tr>
</table>