I have a simple two column table; I want a way to align the data in the first column to the right and to be able to style the two elements separately. Perhaps a table is not the best solution here, but I don't know what else to try. I tried with column groups, but it isn't working. Even when I try applying text-align: right to the 'label' element.
<table>
<colgroup>
<col class="label" />
<col class="price" />
</colgroup>
<tr>
<td><label>Subtotal:</label></td>
<td>$135.00</td>
</tr>
<tr>
<td><label>Taxes:</label></td>
<td>$11.23</td>
</tr>
</table>
Since you're probably talking about heading cells, I'd go for a different approach:
<style type="text/css">
table th { text-align: right; }
table td { text-align: left; }
</style>
<table>
<tr>
<th>Right aligned</th>
<td>Left aligned</td>
</tr>
</table>
Give id or class to your HTML tags. eg ..
Then use css to style them as you want.
tr#cell1{
text-align:right;
}
Use this for every row yoou want to align seperately
Label doesn't right align because it is an inline-element. If you give it display:block or display:inline-block it will fill the whole table cell and apply your right align:
label {
display: block;
text-align: right;
}
Try to give the table cell a class
<td class="sub">…</td>
and then style them with CSS:
table td {
// style for all except .sub
}
table td.sub {
text-align: right;
// and other styles that differ from rest
}
This should do!
<html>
<head>
<style>
.one { width:100px; border:1px solid red; }
.one label { display:block; width:100%; text-align:right; }
.two { width:150px; border:1px solid green; }
</style>
</head>
<body>
<table>
<tr>
<td class="one"><label>one</label></td>
<td class="two">two</td>
</tr>
</table>
</body>
</html>
If you don't want to turn the td element into th you can do this:
<style type="text/css">
table td:first-child { text-align: right; }
</style>
<table>
<tr>
<td>Right aligned</td>
<td>Left aligned</td>
</tr>
</table>
It works well with Firefox, Chrome and IE 8 (probably IE 7 too).
Related
I want to design table in html that would have different heights of td using only one table. Is it possible? If possible how can I get it done?
<table>
<tbody>
<td>height:30px</td>
<td>height:90px</td>
<td>height:60px</td>
<td>height:80px</td>
</tbody>
</table>
Something like this table :
<style>
tr {
height: auto;
}
td {
overflow: hidden;
display: inline-block;
white-space: nowrap;
vertical-align: top;
background-color: #3399ff;
height: 100%;
width: 75px;
border: 1px solid black;
}
td:nth-child(odd) {
background-color: #1177dd;
}
#b {
height: 200px;
}
#j {
height: 90px;
}
#k {
height: 180px;
}
</style>
<table>
<tbody>
<tr>
<td id="b">b</td>
<td id="j">j</td>
<td id="k">k</td>
</tr>
</tbody>
</table>
I suggest you take a look at rowspan. In my opinion, this is the best solution to your problem. It would take a slightly different HTML setup but should do the trick.
http://www.w3schools.com/tags/att_td_rowspan.asp
Use div inside the table td tag Or Convert all code to div instead of table
<table>
<tbody>
<td><div "height:30"></div> <div "height:40"></div> <div "height:60"> </div></td>
</tbody>
</table>
Somthing like this should do the Trick:
<td style="height: 30px"></td>
For styling anything in html you have to use the style Tag and then what you want to style,
or link to a seperate css file
<html>
<head>
<style>
table,td {border:1px solid black ;}
table {width : 80% ;height:80%;}
.top {vertical-align:top};
.center {vertical-align: middle};
.bottom {vertical-align: bottom};
</style>
</head>
<body>
<table>
<tbody>
<tr><td class = "top">1</td><td class = "top" "left">2</td><td class = "top" "left">3</td></tr>
<tr><td class = "center" >4</td><td class = "center">5</td><td class = "center">6</td></tr>
<tr><td class = "bottom">7</td><td class = "bottom">8</td><td class = "bottom">9</td></tr>
</tbody>
</table>
</body>
</html>
Line number 8 ie .bottom {vertical-align: bottom}; is working perfectly fine in internet explorer 8 but it does not work on google chrome even though i have the latest version.
I think you had a simple syntax issue, the semi-colons should be inside the closing bracket.
See your code below.
Also, add height: 100% to body and html to set the reference for the table-cell heights.
Note: As noted in one of the posted comments, you did not define a CSS style for left, so it was not clear what you intended. By itself, left is not a valid attribute.
body,
html {
height: 100%;
}
table,
td {
border: 1px solid black;
}
table {
width: 80%;
height: 80%;
}
.top {
vertical-align: top;
}
.center {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
<table>
<tbody>
<tr>
<td class="top">1</td>
<td class="top">2</td>
<td class="top">3</td>
</tr>
<tr>
<td class="center">4</td>
<td class="center">5</td>
<td class="center">6</td>
</tr>
<tr>
<td class="bottom">7</td>
<td class="bottom">8</td>
<td class="bottom">9</td>
</tr>
</tbody>
</table>
I have a really simple table with two rows and two columns. I want the text in the first column to be right-aligned and the second column to be left-aligned. I'm sure this is really easy but I just can't figure it out.
Here's the HTML:
<table>
<tr><td>Previous:</td><td>Link 1</td></tr>
<tr><td>Next:</td><td>Link 2</td></tr>
</table>
How would I do this?
I would use classes in this instance. You could get fancy but this is the best way for supporting.
CSS
.alignright { text-align: right; }
.alignleft { text-align: left; }
HTML
<td class="alignright"> </td>
<td class="alignleft"> </td>
You could go further by adding padding, margins and further classes. Depending on your TABLE css you might need to add some padding so that the cells aren't all padding: 0 and not showing any alignment.
You can either use :first-child to target the cells in the first column:
td {
text align: left;
}
td:first-child {
text-align: right;
}
But :first-child: doesn’t work in IE 6, so you might want to add a class to the cells in the first column, and use that instead:
<table>
<tr><td class="first">Previous:</td><td>Link 1</td></tr>
<tr><td class="first">Next:</td><td>Link 2</td></tr>
</table>
td {
text align: left;
}
td.first {
text-align: right;
}
As written, this will apply to all <td> elements, so you might also want to add a class to your table and limit the styles to <td>s in that table:
<table class="simple">
<tr><td class="first">Previous:</td><td>Link 1</td></tr>
<tr><td class="first">Next:</td><td>Link 2</td></tr>
</table>
table.simple td {
text align: left;
}
table.simple td.first {
text-align: right;
}
As an alternative and given your scenario and if you are able to - why don't you replace the <td>'s in your second column with <th>'s and then the CSS will be really simple:
td { text-align:right; }
th { text-align:left; }
set different classes on each td element
<style>
td.raligned {text-align: right;}
td.leftaligned {text-align: left;}
</style>
<table>
<tr>
<td class="raligned">blah</td>
<td class="leftaligned">blah</td>
</tr>
</table>
It's easy. Create a class of CSS
<style>
.aleft {text-align: left;}
.aright {text-align: right;}
</style>
Now add the classes to your table, it's easy.
<table>
<tr><td class="aright">Previous:</td><td>Link 1</td></tr>
<tr><td class="aleft">Next:</td><td>Link 2</td></tr>
</table>
HTML
<table>
<tr>
<td class="right-align">Previous:</td>
<td class="left-align">Link 1</td>
</tr>
<tr>
<td class="right-align">Next:</td>
<td class="left-align">Link 2</td>
</tr>
</table>
And your stylesheet..
td.right-align {
text-align: right;
}
td.left-align {
text-align: left;
}
Use
<col align=right>
inside the <table> element, to right-align the first column on IE, and
td:first-child { text-align: right; }
to do the same on more standards-conforming browsers.
Data cells (td elements) are left-aligned by default, so you need not do anything with the second column.
Personally I would recommend not using tables and use a CSS solution that being said here's a jsfiddle option. basically the same as other have said but with jsfiddle you can manipulate it and make changes so you can see them immediately.
http://jsfiddle.net/rhoenig/rnAVH/
My wish is simple - to make a clickable cell (i.e. cell with a link) with a minimum height requirement (40 px in this case) ant vertically centered text. Here's what I come up with so far:
<html>
<head>
<style>
table.test td {
border:1px solid black;
width: 200px;
height: 100%;}
table.test td.cell a {
background-color: #FFF5EE;
display:inline-block;
height:100%; width:100%;
min-height: 40px;}
table.test td.cell a:hover, td.cell a:active {
background-color: #D2691E;}
</style>
</head>
<body>
<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>
</table>
</body>
</html>
Everything's ok, but I can't get the text aligned (centered) vertically :/ The vertical-align property doesn't work in this case.
Here's the example in action (link).
Remove the line
height: 100%;
from
table.test td.cell a { ... }
and add
vertical-align: middle;
to
table.test td { ... }
use vertical-align:
http://jsfiddle.net/pN4pQ/1/
Try This ::
.cell {
line-height: 4em;
}
and for horizontal alignment
.cell {
line-height: 4em;
text-align: center;
}
http://jsfiddle.net/HA6Wq/1/
Ok i made a lot of modification and included jquery but i think it's what you want
So here we go :
<html>
<head>
//Really important, put this if you want the jquery to work
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style>
table.test td
{border:1px solid black;
width: 200px;
height: 40px;}
.cell
{background-color: #FFF5EE;
cursor:pointer;}
.hover
{background-color: #D2691E;}
</style>
<script>
$(document).ready(function() {
//Replace your link and redirect when you click on the cell
$(".cell").click(function() { window.location = 'http:\www.google.lt'});
//Since you can't put a hover class on a td, you have to do it in jquery
$(".cell").hover(function() { $(this).addClass("hover");}, function() {$(this).removeClass("hover");});
});
</script>
</head>
<body>
<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>
</table>
</body>
And I've put the min-height as a height in the td style
I know it's a lot of change but it's working :)
And here is the fiddle : http://jsfiddle.net/d9CGX/
EDIT :
I've updated the fiddle : http://jsfiddle.net/d9CGX/2/ So you can have multiple link
Try the following css to center and vertically align the text:
table.test td {
text-align:center;
vertical-align:middle
}
just if it helps I did this and switched the link to a javascript onclick:
.tdmenu
{
vertical-align : middle;
padding-left : 10px;
padding-right : 10px;
}
.tdmenu:hover
{
background-color : rgb(220,220,220); /*set color to whatever you like*/
cursor : pointer;
}
And my HTML
<table cellpadding="2" cellspacing="0" style="height : 40px; background-color : rgb(255,255,255);">
<tr style="height : 100%;">
<td class="tdmenu" onclick="document.location='Default.aspx';">Home</td>
<td class="tdmenu" onclick="document.location='Projects.aspx';">Projects</td>
</tr>
</table>
Seems to play nice.
I was involved with a similar situation and it took many hours to figure out. This method will allow you to vertically align and center. Replace your
code with this.
<div style="display:table;width:100%;height:100%;">
<a href="http://www.linkhere.com" style="display:table-row;">
<div style="display:table-cell;vertical-align:middle;align-text:center;">
Link contents go here
</div>
</a>
</div>
Put the contents of the link inside the div table-cell of course. This will stretch the link also to the edges of the container your using for this code. Hope that helps.
I have a table of data and each cell is a link. I want to allow the user to click anywhere in the table cell and have them follow the link. Sometimes the table cells are more than one line but not always. I use td a {display: block} to get the link to cover most of the cell. When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row. Here is the sample HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/:
<head>
<style type="text/css">
td {width: 200px}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
</body>
Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
http://jsfiddle.net/RXHuE/213/
You need a small change in your CSS. Making td height:100%; works for IE 8 and FF 3.6, but it doesn't work for Chrome.
td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}
But making height to 50px works for Chrome in addition to IE and FF
td {
width: 200px;
border: solid 1px green;
height: 50px
}
td a {
display: block;
height:100%;
width:100%;
}
Edit:
You have given the solution yourself in another post here; which is to use display: inline-block;.
This works when combined with my solution for Chrome, FF3.6, IE8
td {
width: 200px;
border: solid 1px green;
height: 100%}
td a {
display: inline-block;
height:100%;
width:100%;
}
Update
The following code is working for me in IE8, FF3.6 and chrome.
CSS
td {
width: 200px;
border: solid 1px green;
height: 100%;
}
td a {
display: inline-block;
height:100%;
width:100%;
}
td a:hover {
background-color: yellow;
}
HTML
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
The example lays here
Little late to the party, but there's a nice solution I just discovered.
You can use a combination of relative and absolute positioned elements, along with a pseudo element to get the effect you're looking for. No extra markup needed!
Change the table cell (<td>), to be position: relative;, and create a ::before or ::after pseudo element on the <a> tag, and set it to position: absolute;, and also use top: 0; left: 0; right: 0; bottom: 0;.
Because the pseudo element is attached to the anchor tag, and you're telling it to take up the entire table cell, it will force the anchor tag to be at least that size, whilst not affecting the actual content of the anchor tag itself (thereby retaining its vertically centered alignment).
For example
table {
border-collapse: collapse;
table-layout: fixed;
}
td {
position: relative;
width: 200px;
padding: 0.5em 1em;
border: 2px solid red;
background-color: lime;
}
td a {
/* FONT STYLES HERE */
text-decoration: none;
}
td a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
<a href="http://www.google.com/">Cell 6<br>
second line</a>
</td>
</tr>
</tbody>
</table>
Hope this helps!
Following hack works [Tested on Chrome / Firefox / Safari]
Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.
HTML
<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>
CSS:
td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}
Working Fiddle :http://jsfiddle.net/JasYz/
Try display: block:
td a {display: block; height:100%;}
[EDIT] WTF ... I can confirm this doesn't work in FF 4 and Chrome. This works:
td a {display: block; height: 2.5em; border: 1px solid red;}
That suggests that height:100%; isn't defined in a table cell. Maybe this is because the cell gets its size from the content (so the content can't say "tell me your size" because that would lead to a loop). It doesn't even work if you set a height for the cells like so:
td {width: 200px; height: 3em; padding: 0px}
Again the code above will fail. So my suggestion is to use a defined height for the links (you can omit the width; that is 100% by default for block elements).
[EDIT2] I've clicked through a hundred examples at http://www.cssplay.co.uk/menus/ but none of them mix single line and multi-line cells. Seems like you hit a blind spot.
I will post the same answer here, as I did on my own question.
Inspired by Jannis M's answer, I did the following:
$(document).ready(function(){
$('table tr').each(function(){
var $row = $(this);
var height = $row.height();
$row.find('a').css('height', height).append(' ');
});
});
I added a since empty links (not containing text nodes) can not be styled(?).
See my updated fiddle.
Only problem here is that using display: block forces the browser to ignore the vertical align: center...
oops.
I jury rigged it to look right for one cell with height:60 and a font that occupied 20 pixels by adding a br... Then I realized that I had some items with 2-line text. Dang.
I ended up using the javascript. The javascript doesn't give the nice mousey pointy clicker thing, but the line of text does, so it will actually trigger a visual response, just not where I want it to... Then the Javascript will catch all the clicks that 'miss' the actual href.
Maybe not the most elegant solution, but it works well enough for now.
Now if I could only figure out how to do this the right way....
Any ideas on how to add the mouse icon change to a hand for the area covered by the onclick? Right now, the click to page works, but the icon only changes when it hits the href which only affects the text.
Why don't you just get rid of the <a> altogheter and add an onClick to the <td> directly?
<head>
<style type="text/css">
td {
text-align:center;
}
td:hover {
cursor:pointer;
color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
<td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
<td onclick="location.href='http://www.google.com/';">Cell 3</td>
<td onclick="location.href='www.google.com';">Cell 4</td>
</tr>
</tbody>
</table>
This way you cut out the middle man.
PS: i know this was asked and answered many years ago, but none of the answers above solved the problem in my case. Hope this helps someone.
For me the only solution is to replace <table> <tr> with <div>s and style them using display:table and display:table-row accordingly.
Then you can replace <td> with just <a> and style it with display:table-cell.
Work perfectly even on varying heights of <td> contents.
so original html without anchors:
<table>
<tr>
<td>content1<br>another_line</td>
<td>content2</td>
</tr>
</table>
now becomes:
a:hover
{
background-color:#ccc;
}
<div style="display:table; width:100%">
<div style="display:table-row">
content1<br>another_line
content2
</div>
</div>
I have used this solution: works better then the rest in my case.
CSS:
.blocktd {width: 100%; height: 100%; padding: 0px; overflow: hidden}
a.blocktd {margin: 0em; padding: 50px 20px 50px 20px; display: block;}
a.blocktd:hover {border: 4px solid #70AEE8; border-radius: 10px; padding: 46px 16px 46px 16px; transition: 0.2s;}
And in HTML: ...