<td>
<div id="test">...</div>
</td>
<td>
.....
</td>
I can see from firebug that td is about 40px wider than the "test" div(width+border+margin all included),but there is no css style that do this(no setting of width,padding)!
Why is the "td" not as wide as div here?
I'm now hardcoding the td to9 be as wide as "test" div,but feel uncomfortable.
Without the rest of your code, I'm going out on a limb here, but the <td> will auto size based on the table width / number of columns in the table. If your table does not have an explicit width assigned, then it will expand to 100% width of its container or parent element. You can feel comfortable avoiding this by setting explicit width on the table, or table cells as needed.
In the following scenario, each column will autosize to tablewidth / number of columns or in this case 400 / 4 = 100. So each column will be 100px wide.
<table style="width:400px">
<td></td>
<td></td>
<td></td>
<td></td>
</table>
Depending on the browser, there are two possible results in this scenario. 1. The table will expand to be 100% the width of its parent, or 600px here. That means that each column will then auto size to 150px wide. 2. The table and columns may expand to the width of the widest child element in its column group.
<body style="width: 600px"> <!-- Could be a div or other element here -->
<table>
<td></td>
<td></td>
<td></td>
<td></td>
</table>
</body>
The WC3 Spec can be found here and provides some great detail on how browsers are supposed to implement the HTML 4.01 spec in regards to tables.
Related
I have a table, where two columns will receive 30% of the space each:
<td style="width: 30%;">
The remaining columns should just equally share the remaining space. How do I accomplish this? Do I just give the remaining columns no widthat all?
Yes, declaring no width would work (see snippet below).
<td> automatically adjusts width evenly unless otherwise declared (e.g. <td style="width: 30%;"></td>)
EDIT
When you put data in the fluid cells, they will adapt to the size of the data inside them. To keep them the same width as each other and wrap the text, you will need to declare a width percentage for the fluid cells.
Since we're already using 60% with the first two cells, we have 40% left. We will need to divide 40 by the number of extra cells to get the percentage value for their width.
Thanks to #Chiller for pointing this out!
table {
height: 500px;
width: 100%;
}
td {
background: red;
/* Edit - divide number of fluid cells by 40
(because we're using 60% with the first two)
in this example the number is just over 13) */
width: 13%; /* the number we calculated */
}
<table>
<tr>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
How can I stop a td with lots of text making the td above it the same length?
In this example the outline for the cell containing '1' shows its as wide as the cell containing 'long text here'. What I want is for the cell containing '1' to only be as wide as it needs to be to fit the text it contains.
Can this be done with CSS?
http://jsfiddle.net/r7yXD/1/
<table>
<tr>
<td>1</tRund>
<td>2</td>
</tr>
<tr>
<td>long text here</td>
<td>.</td>
</tr>
</table>
td {
border: 1px solid red;
}
So looking at the image below, the first example is what happens and I understand why, but can I make the 2nd option happen instead with CSS?
You can't. Its the nature of a table to make the td's the same width.
You could however add additional td's and use colspan="2", but to be honest, if you need to do such a thing, especially for texts, you probably shouln't be using tables.
Have you tried something like this
<style type="text/css">
td {
border: 1px solid red;
}
</style>
<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">long text here</td>
<td>.</td>
</tr>
</table>
As stated in the comments this is not possible using a <table>-element. You can read more about it here at w3.org: "17.5 Visual layout of table contents".
It says:
The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules.
And interesting for your case is from rule number 5:
[…] Each cell is thus a rectangular box, one or more grid cells wide and high. […]
I've got a grid (7x7 table) of images.
I want to auto-fit that table/grid in to a fluid sized div that adjusts according to monitor display size.
I want the table not to grow past the bounds of the div, neither width nor height, but take up the maximum area while keeping each table cell the same height and width as all other table cells.
I know this might be hard to visualize from my description. Basically, all table cells need to be forced to an exact square (same width/height), but that size could grow or shrink depending on how big the display size is. And none of the table should go outside the visible screen area for that div.
It's easy to force width: 100% .. but then height could be too large.
I'd like to do this in css, but I'm open to anything that works.
Any ideas?
So you would like to have images in table grid and have it respond to window resizing to always fit.
The markup (in this example my grid is 3x3 but works the same for 7x7, just add more data cells and rows).
<div id="wrapper">
<table>
<tr>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
</tr>
<tr>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
</tr>
<tr>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
<td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
</tr>
</table>
</div>
The CSS:
#wrapper{width: 100%;}
#wrapper table {width: 100%;}
#wrapper table tr td {width: 33%;}
#wrapper table tr td img {width: 100%;}
Used some random image from Flickr.
Hope it helps.
I have a table header, <th>, that contains a <div> with text. I want to vertically align the div such that it is aligned to the bottom of the header. I am having serious trouble doing this even though it seems like it should be easy. Any help would be great.
i.e.
<table>
<tr>
<th>
<div>T<br>E<br>X<br>T</div>
</th>
...
</tr>
...
</table>
As you can see, I am making the header text vertical (by adding break tags). The headers are being pulled dynamically and the lengths (and therefore the heights) vary. But I need them aligned to the bottom rather than the center.
<style>
th{
vertical-align:middle}
</style>
<table>
<tr>
<th>
<span>T<br>E<br>X<br>T</span>
</th>
...
</tr>
...
</table>
This should work.
A div with display:inline might do the trick also.
The display:inline is the trick here.
I'd like to have the width of my table 100% of screen width - so flexible to different screen sizes.
is it possible to have my columns automatically resize proportionately?
I've tried give the td's percentage widths but this doesnt seem to work, firebug shows that the tbody isnt filling the tables width?
<table class="">
<tr class="headings">
<td class="entry">
</td>
<td class="calendar">Availability Calendar
</td>
<td class="deals">Last Minute Deals
</td>
<td class="ann">Announcements
</td>
<td class="banners">Banners
</td>
</tr>
</table>
You just have to set the width of the table to 100%, and it will be the width of it's parent. The columns will automatically be sized according to their content, unless you specify anything else for some columns.
The columns will always fill the width of the table, so if the specified widths are less than 100% or smaller than the pixel size of the table, they will be larger than specified.