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.
Related
I would like the span element width to be the rest of td's width.
Here is a very simple example. In other words, now I have some code, but the span element will be too wide. It will go over the latest td element.
Here is the HTML code which has some basic CSS code, too. I'm not allowed to modify the basic strucuture of this table. All I want to do is modifying my span element.
<table style="width:100%;">
<tr>
<td style="width:30px;">1</td>
<td>Go <span style="display:inline-block;width:100%;background-color:black;">to...</span></td>
<td>#</td>
</tr>
</table>
How should I modify the span element to get it use the rest of the td but no more?
this could be achieved using flex box
td div {
display: flex;
}
td span {
flex-grow: 1;
}
<table style="width:100%;" border=1>
<tr>
<td style="width:30px;">1</td>
<td>
<div>
Go <span style="background-color:black;">to...</span>
</div>
</td>
<td>#</td>
</tr>
</table>
Here is my own solution to my problem. This is the best way which I was able to find out.
<table style="width:100%;">
<tr>
<td style="width:30px;">1</td>
<td style="padding-left:65px;">Go to...</td>
<td>#</td>
</tr>
</table>
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.
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've two tables like below:
<table width="100px">
<tr>
<td>
<table width="100%">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
</td>
</tr>
</table>
When I run this my internal table is exceeding parent table width (100px) because it is having more TDs. How can restrict this?
All values are coming in the same row and it is going out of reserved area (100px). Is there any way to display values in multiple rows with the above code?
You cannot do this with <table> layout. Even adding the following CSS will not fix it, instead the cells are just rendered over each other.
table {
table-layout:fixed;
overflow:hidden;
}
The HTML table column element <col> element will also not really help since it will only apply to the first <td>.
One approach would be to use a non-<table> layout instead, for example:
HTML
<table>
<tr>
<td>
<div id="container">
<div>One</div><div>Two</div><div>Three</div><div>Four</div><div>Five</div>
<div>Six</div><div>Seven</div><div>Eight</div><div>Nine</div><div>Ten</div>
</div>
</td>
</tr>
</table>
CSS
table {
width:100px;
}
#container div {
display:inline-block;
}
See demo of how <col> does not work and how the <div> layout wraps at 100px.
U can't fit 10 words like this in 100px with normal size font.
I think you might want to use <tr></tr>(row) tags for each word instead of td(cell)
Or you really want the 100px row to be split in 10 cells and to contain those words? (I think if might be somehow possible but u won't see the words :D or maybe if you used little font and somehow made the words to be rotated about 90 degrees...)
This Q/A Word-wrap in an HTML table might help u in that case.
add a class to table and set this css code
table.restrict { table-layout:fixed; }
table.restrict td { overflow: hidden; }
It will help you:
Fixed Table Cell Width
Use style attr 'table-layout:fixed' with table
or try this:
// div css
<style>
.frame {
overflow-x:scroll;
width:100px;
}
</style>
<div class='frame'>
<table width='100px'>
<tr>
<td>
<table width='100%'>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
I have a table with 2 <tr> and 2 <td>:
<table>
<tr>
<td>
<table>
<!-- other content -->
</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Where the ***** is I need to insert pretty much the same table (which does not contain another table).
but when I debug it the table is left aligned.
Live Example
I want that the table in the upper left box is right aligned (for knowledge: and center aligned).
For example:
The table within is 32px width but the containing td is 64px width.
How can I align the table to the right?
A table is a block-element; text-align and align only works on inline-elements.
So for a block-element you have to use margin:
CSS:
.centered{
margin: 0 auto;
}
.rightaligned{
margin-right: 0;
margin-left: auto;
}
.leftaligned{
margin-left: 0;
margin-right: auto;
}
HTML:
<td>
<table class="leftaligned">
<!-- Other Content -->
</table>
<table class="centered">
<!-- Other Content -->
</table>
<table class="rightaligned">
<!-- Other Content -->
</table>
</td>
This will work in almost every browser, even Internet Explorer 7.
Only the following comes to mind:
<table>
<tr>
<td style="text-align: right"></td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Or another css approach:
table table {
float: right;
}
or inline with float:
<table>
<tr>
<td>
<table style="float: right;">.....</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
In case the td only contains table and no other text or element then below code should also work, only thing it will right align everything in the td and won't work in html5:
<table>
<tr>
<td align="right">*</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>