In this table, not just cell B has a heading and content, but also cells A and C.
My attempt to set the heading and the content using DIVs is only partially successful. font-weight is observed, but vertical-align is not. Why?
CSS
<style type="text/css">
td {
text-align: left;
}
.heading {
vertical-align: top;
font-weight: bold
}
.content {
vertical-align: middle;
}
</style>
HTML
<table width="300px" height="300px" border="1">
<tr>
<td rowspan="2">A</td>
<td>
<div class="heading">Heading of Cell B</div>
<div class="content">Content of Cell B</div>
</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
verticle align should be middle
verticle-align: middle;
This will place the text in the middle. Although you have to be aware that is places it in the middle on the line (not the container) so you need a line-height
line-height: xxx;
Or use div's and mimic a table: http://jsfiddle.net/rf2kC/
vertical align won't work on an element that is displayed in-line, like a div. you can put another table inside of your TD, or change your css to something like this:
<style type="text/css">
td {
text-align: left;
}
.heading {
position: relative;
top: 0;
background: blue;
height: 150px;
}
.content {
position: relative;
bottom: 0;
background: yellow;
height: 150px;
}
</style>
Try:
td {
text-align: left;
vertical-align:top;
}
.heading {
font-weight: bold;
}
.content {
margin: auto;
line-height: 200px;
}
http://jsfiddle.net/Xvx83/
Related
As you can see, in order to make the entire table cell link-clickable, I used td a {display: block}. The problem is td a {vertical-align: middle} no longer works with display: block. Not sure how else to center it vertically. Any help would be greatly appreciated.
P.S. I avoided using line-height because my link needs to be multi-line.
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: block;
height: 100px;
vertical-align: middle !important;
}
<table>
<tr>
<td>TEXT</td>
<td>LINK</td>
</tr>
</table>
You can use an auxiliar span and center it inside the anchor, so its content is free to move and align.
E.g.:
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: flex;
height: 100%;
}
td a span {
height: fit-content;
align-self: center;
}
<table>
<tr>
<td>TEXT</td>
<td>
<a href="">
<span>
A VERY LONG LINK MAY BE LIKE THIS ONE, I GUES, RIGHT? HERE WE GO :D
</span>
</a>
</td>
</tr>
</table>
Added span in anchor tag and made a CSS change for the output
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: table;
position: relative;
height: 100%;
width: 100%;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
}
<table>
<tr>
<td>TEXT</td>
<td><span>LINK</span></td>
</tr>
</table>
I find that if I put an image inside a table cell like this (JSFiddle):
<table style="height: 300px; border: 1px solid black">
<tr>
<td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td>
</tr>
</table>
There will be a small space below the image, making the vertical align not exact:
Does any one know what is happening here?
I tried to add vertical-align: middle to the td, but it makes no difference.
Have you tried adding display: block to the img element? Seems to fix most problems for things within tables.
img {
display: block;
}
<table style="height: 300px; border: 1px solid black">
<tr>
<td>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" />
</td>
</tr>
</table>
JSFiddle
You have to set the img as "display:block"
img {display:block}
http://jsfiddle.net/91beLce7/4/
Try this Fiddle
*{
margin: 0;
padding: 0;
}
table tr td img{
display: block;
}
You can fix that with line-height: .8em;
Try like this: Demo
* {
margin: 0;
padding: 0;
}
table {
background:red;
height: 300px;
border: 1px solid black;
}
tr {
background:#ccc;
}
img {
background:green;
display: block;
}
I'm trying to vertial align both image and text inside 1 <td>. I know this can work if I put the image in 1 <td> and the text in another, it's just copied and has about 50 rows. Basic html:
<td>
<img src="img.png" /><strong>Headline!</strong><br />Supporting blurb, not bolded.
</td>
The css is here:
td {
padding: 0.5em 0;
text-align: left;
vertical-align: middle;
}
td img {
float: left;
margin-right: 1em;
max-width: 48px;
vertical-align: middle;
width: 20%;
}
ok, so in the current state the img (which is taller than the text) is vertically aligned, but the text seems to be aligned to the top. If I take out the br and place the lines of text in separate p tags it looks the same. If i take the float off the img both it and the strong text are vertically centered, but after the br it goes to a new line obviously, which is under the image. I want it to have both img and text vertically aligned...but for the text to go to a new line after the strong tag.
I've looked at lot of answers, and nothing works.
This works just fine (You missed <table></table>):
$(document).ready(function() {
var textHeight = $("#text-container").height();
var imgHeight = $("table td img").height();
var padding = (imgHeight - textHeight)/2;
$("#text-container").css('padding-top',padding + 'px');
});
td {
padding: 0.5em 0;
text-align: left;
height: 100px;
background-color: red;
}
td img {
float: left;
vertical-align: middle;
margin-right: 1em;
max-width: 48px;
width: 20%;
height:auto;
}
#text-container {
float:right;
padding-top:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td>
<img src="http://placehold.it/50x100">
<div id="text-container">
<strong>Headline!</strong>
<br />Supporting blurb, not bolded.
</div>
</td>
</table>
Working JSFiddle as well: http://jsfiddle.net/33xyt4ok/
Obviously remove/add the correct height you want, just used 100px to show the vertical-align was working.
I want to combine a fixed and a fluid element. With <table> it is very easy, but I want tableless.
With table: http://jsfiddle.net/Tam7z/
But, how do this without tables, just with divs and CSS?
HTML:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="80" class="a">FIXED</td>
<td class="b">FLUID</td>
</tr>
</table>
CSS:
table { background: #f4f4f4 }
.a { background: #CCC }
.b { background: #999 }
/* */
* { font-family: sans-serif }
td { padding: 5px }
p { color: #CCC; font-style: italic; margin-top: 40px; font-weight: 100 }
Like this: http://jsfiddle.net/NicoO/Tam7z/1/
This is a very simple way to layout things. But both elements may not be the same height by default. Also you can not verticaly align elements inside of this elements. You should be using a min-width for the body or parent item to prevent the fluid div from becoming too small.
#left
{
float: left;
width: 150px;
background-color: lightgray;
}
#right
{
margin-left: 150px;
background-color: gray;
}
HTML
<div id="left">Fixed</div>
<div id="right">Fluid</div>
Without using HTML tables, you could use CSS tables. Just set the parent element's display property to table. The children elements would then have a display of table-cell. The fixed row would obviously have a fixed width and the fluid table cell would fill the remaining space with a width of 100%. You can use vertical-align:middle to vertically center the .row elements too.
EXAMPLE HERE
<div class="table">
<div class="row fixed">FIXED..</div>
<div class="row fluid">FLUID..</div>
</div>
CSS
.table {
background: #f4f4f4;
display:table;
height:100px;
}
.row {
display:table-cell;
vertical-align: middle;
padding:0 20px;
}
.row.fixed {
background: #CCC;
}
.row.fluid {
background: gold;
width:100%;
}
This approach is well supported with the exception of IE7 and lower.
Problem
I have a fixed width table (which it must be) and one of the cells contains text
that is too long to fit within it, so it overflows outside the cell to the right.
I need to have all the table cells' text to be aligned to the right.
I ideally don't want to change any of the markup.
What I'm Looking For
I'm in need of finding someway for the (text in the example) "longlonglong" to overflow to the left over the other previous cells and maintain it's aligned right state.
Code
HTML
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">very longlonglong text</td>
</tr>
</table>
CSS
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Example
http://jsfiddle.net/xareyo/eVkgz/
See http://jsfiddle.net/eVkgz/1/
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">
<div id="container1">
<div id="container2">very longlonglong text</div>
</div>
</td>
</tr>
</table>
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
#container1 {
width: 30px;
position: relative;
}
#container2 {
float: right;
overflow: visible;
text-align: right;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Do you need a variable height of the cells?
If not:
Place a div inside the td and this CSS:
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
position: relative;
}
td div {
position: absolute;
right: 0;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Add word-break: break-all; to yours td style:
td {
word-break: break-all;
text-align: right;
border: 1px solid black;
vertical-align: top;
}