How do I get these tables to slide under each other without the extra space?
<table border="0">
<tbody>
<tr>
<th>And another</th>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr>
<th>And another</th>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr>
<th>And another</th>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr>
<th>And another</th>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
</tbody>
</table>
CSS
/* ---------------[ Tables ]--------------- */
table {
float: left;
width: 285px;
}
tr, td, th {
margin:auto;
}
td, th {
padding:5px;
vertical-align:top;
}
th {
font-weight:bold;
background:#ddd;
}
td {
border:1px solid #ddd;
}
Thanks
You could try adding clear: left to your tables:
table {
float: left;
clear: left;
width: 285px;
}
Demo: http://jsfiddle.net/ambiguous/AsUSj/
You might need to play with the panel sizes in the fiddle to convince yourself that it works.
either set width to 100% on tables or put a width on their parent element with width 285px
Unfortunately, pure floating wont do what you want it to in this case. The simplest fix is non-semantic: Wrap the left column in a div that's floated to the left, with a width of 50% or some other suitable number, and wrap the right column in a div that's floated to the right, with a width of 50% or some other suitable number.
The alternative to preserve semantics unfortunately relies on either absolute positioning (which wont work for dynamic tables) or JavaScript. jQuery Masonry is a reasonable way of aligning columns of stuff so that it all fits together nicely, but unfortunately will not work for users without JavaScript enabled.
table {
display: block;
width: 285px;
}
Related
Okay so I don't even know if this is possible, but I'm trying to accomplish the following design with the use of a <table>:
I know it would be easier to just use a <span> and not even bother with tables, but I figured a <table> would actually make sense here.
This is what I have so far:
table {
text-align: left;
}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
You could just set a display:flex on tr and it would do the job. Like so:
tr {
display:flex;
}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
You can reset display values for th and td
table {
text-align: left;
}
th,td {display:inline;}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
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 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 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>