I have a table in my html that I would like to center on my page. I have the following code. I is perfectly find in ie but not in chrome. Am I doing something wrong?
<table align="center">
<tr>
<td>
<div class="zoom_controls"> </div>
</td>
</tr>
</table>
The align="center" syntax was deprecated a long time ago. Add margin:0 auto to your table:
table {
margin:0 auto;
}
jsFiddle example (border added for visibility)
Give the table a fixed width, if possible.
Give the table a top- and bottom-margin of 0 (or other if you want to) and a left- and right-margin of auto.
This works with every kind of element with a known width.
You can also use a variable width (em / %).
EDIT: seems like other were typing the same solution as me.
For me what worked is:
margin: auto;
display: inline-block;
Tables
Related
I've got a pretty regular HTML <table> with one cell that spans multiple rows via rowspan. Inside of this cell I've got a <div> that I want to occupy the entire height of the cell but for the life of me I can't seem to figure it out. It seems similar to this post which mentions this Chrome bug but also seems so simple that maybe I'm just not thinking clearly.
Here's a stripped down version of my HTML:
<table>
<tr>
<td class="a" rowspan="2"><div>A</div></td>
<td class="b"><div>B</div></td>
</tr>
<tr>
<td class="c"><div>C</div></td>
</tr>
</table>
And CSS:
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;
}
And a JSFiddle. And here's what I'm getting and what I'm trying to get:
What's really weird is if I use Chrome's inspector to change the <div> to display: inline-block and then set it back to display: block it actually looks pretty much exactly how I want it to.
(And no, switching away from a table isn't an option for this project, there's other code not shown that requires that.)
Option 1
Simply add overflow:auto; to your div CSS
Demo Fiddle
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;overflow:auto;
}
Option 2
Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.
Option 3
The only other way would be to set position:relative on the td elements then position:absolute for the child div
Let's say this is the table:
<table>
<tbody>
<tr>
<th>something goes here</th>
<td>dkjfkldfjlfjs</td>
<td>dkjfkldfjlfjs 4234324</td>
<td>dkjfkldfjlfjfdgfdggs</td>
</tr>
</tbody>
</table>
Is it somehow possible to only scroll the tds from from left to right but leave the th where it is? Like when you fix a column in Excel where only the first column (the th) is frozen and the rest (all tds) scrolls at once.
Yes. You can, just apply overflow-x:scroll; with a display:inline-block; to achieve what you are looking for.
WORKING DEMO
The CSS:
td {
display: inline-block;
overflow-x: scroll;
}
Hope this helps.
Fiddle demo : Demo
When apply scroll to tbody, it may collapse table design. you have to manually apply width on header.
Adding scroll div block, below css is enough
min-height:200px;
overflow:auto;
For more details please check this blog post
Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!
It's very simple, but I don't understand why it doesn't work:
I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.
Code is basically:
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:right">
<table border="1">
<tr><td>Hello</td><td>Hello 2</td></tr>
</table>
</td>
<td>Hello 2</td>
</tr>
</table>
I don't want the nested table to be width=100% or anything like that...
Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?
My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.
I would like to add that the CSS way to align tables relative to its container is with the margin property.
You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.
As #maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.
You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).
If you want to fix it (not with full functionality), you can write this:
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
when you don't want the div to be floating, you may try this :
http://jsfiddle.net/NvEZ8/
<div style="text-align:right;">
<table style="display:inline-block">
<tbody>
<tr>
<td></td>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
</div>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome
I need to show a page with a product icon (which is usually 300x400px in dimensions) on the left side of the page and its details on right side.
I thought I'd put the description in rows of a table.I created 3 div elements- a containerdiv,an icondiv,and a detailsdiv and tried to float the icondiv to left and detailsdiv to right.I got the icondiv on left side of page,but the detailsdiv is shown below the icondiv not side by side!
Ideally the icondiv should be 25-30% in width of containerdiv and detailsdiv should take up the rest of the width.I am wondering if there is a way to do it without mentioning width in pixels.
please correct me if there is something wrong with my css
thanks
mark
<div class ="itemdetailscontainer">
<div class="itemicondiv">
<img border="0" src="${item.isbn }.png" alt="${item.isbn }.png" />
</div>
<div class="itemdetailsdiv">
<table id="itemdetailstable" width="100%">
<tr>
<td>
${item.name }
</td>
</tr>
<tr>
<td>by</td>
</tr>
<tr>
<td>${item.maker.name }</td>
</tr>
<tr>
<td>
<p>Description:</p>
<p>${item.description}</p>
</td>
</tr>
</table>
</div>
</div>
css is
div.itemdetailscontainer{
float:clear;
}
div.itemicondiv{
float:left;
}
div.itemdetailsdiv{
float:right;
}
I tried this
div.itemdetailscontainer{
width:100%;
}
div.itemicondiv{
float:left;
width:25%;
}
div.itemdetailsdiv{
float:right;
width:75%;
}
and this gets the effect..
thanks everyone for responding..Is the use of
width : 25% etc problematic? Do I need to hardcode width in pixels etc?
The overflow property was new for me..
See: http://jsfiddle.net/Uys4s/
div.itemdetailscontainer{
overflow: hidden;
background: #eee
}
div.itemicondiv{
float: left;
width: 30%;
background: #ccc
}
div.itemdetailsdiv{
overflow: hidden;
background: #aaa
}
width: 30% handles this: "Ideally the icondiv should be 25-30% in width of containerdiv"
overflow: hidden on div.itemdetailsdiv handles this: "detailsdiv should take up the rest of the width".
overflow: hidden on div.itemdetailscontainer will contain the floats in the way I think you imagine the nonexistent clear: float will. Take a look at the valid values of clear. If you desperately wanted to use clear: both to clear your floats, this is how you'd do it: http://jsfiddle.net/Uys4s/1/ - but overflow: hidden is easier.
Be sure that your container (itemdetailscontainer) has enough width to hold them side by side. Inspect with Firebug or other tool and check the width.
Also I would suggest you use div's for the itemdetailstable for consistency.
There's nothing called float:clear It should be :
float : none;
or if you're trying to clear the float it should be :
clear:both
float: clear does not exist!
I think you want this: clear: left/right/both
As it turns out I don't know CSS.
I ran into a brick wall after using Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/)
I have a table with this style
table.home_right_top, .home_right_top table, .home_right_top
{
background-color: #F2F2F2;
width: 100%;
padding: 10px 20px 15px 20px;
}
but the padding is not applied to the table at all and I cannot figure out why. I am happy that I see the same behavior on all the browsers including IE7 and IE8 but I don't see any padding. Can someone please tell me what I am doing wrong here?
Thanks.
EDIT
This is my table
<table class="home_right_top" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="blueHeading14 heading_padding_right" style="width: 64px">Products</td>
<td class="rpt_stroke" style="width: 280px"> </td>
</tr>
</tbody>
</table>
The problem isn't the reset, it's that the W3 CSS property spec states that padding can be applied to:
all elements except table-row-group,
table-header-group,
table-footer-group, table-row,
table-column-group and table-column
So it's invalid to apply padding to a <table>. Instead, the only solution that comes to mind is to apply margin instead, wrap the table in a <div>, or apply the padding to the individual <td>s with special classes.
Take a look at the last line in his css:
table {
border-collapse: collapse;
border-spacing: 0;
}
Try removing that and seeing what happens, table cells don't often act like block level elements. I think the real problem here is that you shouldn't style the table element like this, becasue it's display property by default is table which is not the same as the box model.
Try putting padding on the cells themselves or add a margin to the table.
Works fine for me. Did you declare a DocType?
You have to apply the style to the TD's not the table.
table.home_right_top td