I need some float text to be vertically centered in a table cell full of text. This code works only with a single line, otherwise it loose its alignment.
<table style="border: 1px solid red; width: 100%;">
<tr>
<td>
Content.</br>Content.</br>Content.</br>Content.</br>Content.</br>
<span style="line-height: inherit; float: right; vertical-align: middle;">Float</span>
</td>
</tr>
</table>
I probably can't use any other way to solve it other then the float element (no other columns for example), but I'll approciate any kind of suggestion.
Test code: http://jsfiddle.net/x49rv6dz/
The nested table does exactly what I need, but I don't like it in my code (too many tables). I'm still open to any suggestion...
<table style="border: 1px solid red; width: 100%;">
<tr>
<td>
<table style="border-collapse: collapse; border: 0px; width: 100%;">
<tr>
<td>
Content.</br>Content.</br>Content.</br>Content.</br>Content.</br>
</td>
<td>
<span style="line-height: inherit; float: right; vertical-align: middle;">Float</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
Test code: http://jsfiddle.net/oucL931d/
Related
Below is my code for 2x tables. There is PHP & results I have removed. But I cannot get these on one line but next to each other.
I have tried Align Left/Right and this puts them on 2x separate lines? I have tried float as well and this has not helped either.
Does anybody have advice for me?
HTML
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Received Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent To</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Sent Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent By</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
CSS :
table
{
border: #000000 1px solid;
background-color: #363636;
}
You could also add a class of left and right to each table and define floats in your css if you want the tables to always align left and right.
table.left {
float: left;
}
table.right {
float: right;
}
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="left">
YOUR LEFT TABLE content
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="right">
YOUR RIGHT TABLE content
</table>
You don't need the 'table' class because you can use the table tag as a selector.
Try adding display:inline-block;
Update CSS
table
{
border: #000000 1px solid;
background-color: #363636;
display:inline-block;
}
WORKING:DEMO
Float doesn't work on display: table which is the default table display property.
You have to put display: block on it in order to float them
table {
border: 1px solid #000;
display: block;
float: left;
width: 40%;
}
table:first-child {
margin-right: 40px;
}
Working Fiddle
I have three tables on my page, each with one row, and three data cells inside.
My issue is, when adding text to a cell, it is increasing the height of the table though I have already defined a height. My second issue is positioning the pictures in the final (3rd) data cells to be in the middle.
#snake {
background-color: #c4df9b;
}
#bat {
background-color: #e2e2e2;
margin-top: 18px;
margin-bottom: 18px;
}
#monkey {
background-color: #c69c6d;
}
#monkeygraphic {
padding-top: 5px;
}
.animalcontainer {
width: 682px;
height: 200px;
}
.animalcontainer td {
border: 1px solid black;
width: 227px;
text-align: center;
}
<div id="main-left">
<table id="snake" class="animalcontainer">
<tr>
<td>
<img src="images/snakegraphic.png" alt="Snake Graphic" title="Snake Graphic" width="155" height="196">
</td>
<td>sad</td>
<td id="snakepic">
<img src="images/snake.jpg" alt="Snake" title="Snake" width="152" height="152">
</td>
</tr>
</table>
<table id="bat" class="animalcontainer">
<tr>
<td id="batgraphic">
<img src="images/batgraphic.png" alt="Bat Graphic" title="Bat Graphic" width="198" height="98">
</td>
<td>
<h1>sad</h1>
</td>
<td id="batpic">
<img src="images/bat.jpg" alt="Bat" title="Bat" width="152" height="150">
</td>
</tr>
</table>
<table id="monkey" class="animalcontainer">
<tr>
<td id="monkeygraphic">
<img src="images/monkeygraphic.png" alt="Monkey Graphic" title="Monkey Graphic" width="207" height="185">
</td>
<td>
<h1>sad</h1>
</td>
<td id="monkeypic">
<img src="images/monkey.jpg" alt="Monkey" title="Monkey" width="152" height="150">
</td>
</tr>
</table>
</div>
Silly me, i've just learnt the vertical-align css "thing" which seems to have sorted my issue.
Thanks to anybody who read the question though.
(Fix: giving my middle td cells a class, and adding vertical-align: top; to the css)
Recently I have found a problem on Safari with table.
I have problem with red line (td bottom border or upper).
Here it is on fiddle http://jsfiddle.net/ryrmS/55.
And the full source:
<table border="0">
<tbody>
<tr>
<td style="border-bottom: 2px solid red;">
<div style="width: 20px;"></div>
</td>
<td style="border: 1px solid blue; height: 156px;" rowspan="2">
Content1<br/>
Content2<br/>
Content3<br/>
</td>
</tr>
<tr>
<td style="border-top: 2px solid green;">
<div style="width: 20px;"></div>
</td>
</tr>
</tbody>
</table>
The problem is that the cells do not capture 50% of space in Safari but first takes 0 and third td takes all available height. It works in all browser except Safari.
Also I can't specify fixed height of div or td tag, because it it generated many times in my code and there are different heights and also many tables one inside another.
I can't figure out what the problem is with Safari and how to fix it. Does anyone have some hints?
It looks like:
If you are explicitly setting height: 156px; on the td that spans both rows, why not just set the other 2 tds to height: 88px;?
See working jsFiddle demo
HTML
<table border="0">
<tbody>
<tr>
<td style="border-bottom: 2px solid red; height: 88px;">
<div style="width: 20px;"></div>
</td>
<td style="border: 1px solid blue; height: 156px;" rowspan="2">
Content1<br/>
Content2<br/>
Content3<br/>
</td>
</tr>
<tr>
<td style="border-top: 2px solid green; height: 88px;">
<div style="width: 20px;"></div>
</td>
</tr>
</tbody>
</table>
CSS
table { border-collapse: separate; border-spacing: 0; }
td { vertical-align: middle; text-align: center; }
RESULTS
(tested in FF, Chrome, Safari, and IE)
I have the following HTML code:
<table width="600px" height="275px" cellspacing="10" cellpadding="0" border="0" align="center" style="background: #ffff00; padding-left:0px; padding-right:0px; text-align: center;">
<tbody>
<tr>
<td colspan="3">Silo'd Doc & Header - "Your doctors wants to connect with you."</td>
</tr>
<tr style="text-align: center;">
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">STUFF GOES HERE</td>
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">OTHER STUFF GOEScd HERE</td>
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">AND FINALLY</td>
</tr>
</tbody>
</table>
Displays the following in IE:
And the following in FF:
I would use SPAN/DIV but only table is allowed in my codebase.
How can I have it so the blue boxes are centered horizontally within the yellow main table and each blue boxes contents stays inside the blue boxes with a 5px padding at the edge in all the browser?
add overflow:auto and word-wrap:break-word to your <td> elements.
CMIIW~
Why does the code below not cause the <table> to be vertically-aligned in the middle of the <div>?
<div style="width: 850px; height: 470px;vertical-align: middle;" align="center">
<table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr> <tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
I want the <table> in the middle of the <div>, but it is at the top! How can I fix this?
Thanks for your future advice.
Outside of table cells, vertical-align sets the vertical alignment of text within a line, rather than the vertical alignment of entire elements like your table.
However, if you set display: table-cell; on your <div>, that seems to achieve the effect you want.
I’m not sure how many browsers support this though. I’ve checked in Chrome 6, Firefox 2 and Opera 10.5, and they’re fine with it. Internet Explorer could be a different matter.
Have you tried "display:flex;"?
div{
width: 850px;
height: 470px;
display: flex;
/* WIDTH and HEIGHT are required */
justify-content: center;
align-items: center;
}
td, table{
border-collapse: collapse;
border: 1px solid black;
}
<div>
<table>
<tr>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>2019</td>
<td>2018</td>
<td>2017</td>
</tr>
</table>
</div>
Try this:
<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>
table is a block element. To get it to vertically align, I think it needs to be displayed as inline. inline-block will often give you the best of both worlds in situations like these. Cheers!
Its easy. Always use this >> style="vertical-align:middle" << inside every TD. You can use top, middle and bottom. You can push it in the CSS too.
try this:
#centerAligned{
text-align: center;
margin-top: 50%;
}
it worked for me!!