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.
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>
I browsed some other questions, but couldn't find something that fixes my issue.
I created a code snippet here:
http://jsfiddle.net/manoj382/3SeB7/embedded/result/
I have a table with one row and six cells. The width of each td/cell is defined and it matches the width of the image inside of it (the width of each image is defined, too). Everything works fine, but when I zoom in or out in the browser, white gaps appear somewhat sporadically.
I tried removing white space in the code, I defined the width and height, the images are set to display:block, the total width of each cell/image matches the total width of the entire table, which is also defined. The client is being picky about the gaps when zooming, though, and I'm out of ideas.
*This is for an HTML newsletter, which is why I'm using the old school table layout method.
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="31">
<img src="http://placekitten.com/g/31/64" style="width:31px; height:64px;">
</td>
<td width="65">
<img src="http://placekitten.com/g/65/64" style="width:65px; height:64px;">
</td>
<td width="411">
<img src="http://placekitten.com/g/411/64" style="width:411px; height:64px;">
</td>
<td width="64">
<img src="http://placekitten.com/g/64/64" style="width:64px; height:64px;">
</td>
<td width="29">
<img src="http://placekitten.com/g/29/64" style="width:29px; height:64px;">
</td>
</tr>
</tbody>
</table>
The relevant css:
<style type="text/css">
img {display:block !important;}
</style>
While zooming in/out, the browser has to round the box widths to integers. You cannot assume that things will always be properly aligned.
One solution could be to use float: left boxes instead of table cells so that the boxes are always guaranteed to be flush against each other.
Another solution could be to use background images instead of <img> tags as #user1760422 mentioned in a comment above. You could make the images slightly wider than the cells or just allow background-repeat: repeat-x to show a patch of pixels instead of a white strip between the images.
I cannot explain why it's doing this (I'm able to duplicate it on my Mac). But I do have a fix.
For some reason, your table cell with the width of 411 pixels is showing as 412px wide. The image is also showing as 412px wide, even though the image itself is only 411px wide. You can see this if you run Chrome Dev Tools and mouse over the table cell. It will show that it has an actual width of 412 for some reason that I cannot explain.
If I delete the table width of 600 at the top, the problem goes away.
Change this:
<table width="600" cellpadding="0" cellspacing="0" border="0">
to:
<table cellpadding="0" cellspacing="0" border="0">
See: http://jsfiddle.net/3SeB7/1/embedded/result/
The issue is your sliced images are sometimes odd integers. If you change the image slice widths to an even number (and of course in the widths in the img and td tags), it should eliminate the gaps at certain zoom levels.
insted of giving width in the table, try giving the width in the style tag:
Insted of
Try the below
<table style="width:700px" cellpadding="0" cellspacing="0" border="0">
I just had a similar issue. What the browser is doing is increasing the <td> cells so that combined they fill the whole width of the table, which is causing the white space between the image which is XXpx and the td which is now XX.2313px. You can fix this by setting the min-width of all your images to 100%.
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 row <tr> that has a few columns <td> in it. I have a background image set to the <tr> but it restarts the background image for each <td> as if it were individually set for each <td>. I would like the one image to span across the background for all the columns in that row.
Is there a way to do that?
here is my code:
<tr bgcolor="#993333" style="color:#ffffff; background:url(images/customer_orders/bar.gif) no-repeat;">
<td><strong>Product(s)</strong></td>
<td width="7%"><div align="center"><strong>Qty</strong></div></td>
<td width="11%"><div align="center"><strong>Total</strong></div></td>
</tr>
Thanks!!
It won't change anything if you replace background-repeat property with 'repeat'.
The fact is TR does not support backgrounds and you must do it different way.
If you can use divs - go for it. If you must use table, move your header to seperate table and apply background to this new header-table. This is not perfectly correct but will do the job. If I was you I would use bar.gif graphic that I can repeat-x across all header tds.
<table style="background:#993333 url('images/customer_orders/bar.gif'); color:#fff;">
<tr>
<th>Product(s)</th>
<th>Qty</th>
<th>Total</th>
</tr>
</table>
<table>
<tr>
<td>data1</td>
<td>tdata2</td>
<td>data3</td>
</tr>
</table>
You will probably have to set the background position separately on each <td>. <tr>s don't support most css properties.
For example, in the simple case where left and right columns are equal widths:
tr td{ background-position: center; }
tr td:first-child { background-position: left; }
tr td:last-child { background-position: right; }
This obviously gets much more complex when you the widths are different, and in your case with % widths, you would probably have to do some javascript to get the actual location of the middle column.
<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.