I have a row in a table that has 3 cells in it with values A, B, and C and the table is the full width of the screen, which is more than enough room for all 3. Right now, when they display, all cells are getting 1/3 of the room, but this isn't what I want. I want the 2nd and 3rd cells to be their "correct" size, and the first cell to take up the difference. I can't just set the width on them because they are dynamically sized. How can I do this?
Just set the width of the table to 100%, the width of A to 100% and B and C to auto.
Tested and working
<table border="1px" width="100%">
<tr>
<td width="100%">A</td>
<td width="auto">BB</td>
<td width="auto">CCC</td>
</tr>
</table>
Code A and C in pixels and give B a width of 100%
Rune's answer with Pistos' comment got me close. The last step was to add style="white-space:nowrap" to the non-greedy columns, giving:
<table border="1px" width="100%">
<tr>
<td width="100%">A wide column</td>
<td style="white-space:nowrap">Compact column 1</td>
<td style="white-space:nowrap">Another compact column</td>
</tr>
</table>
Works for me in Firefox 25.
I tried Diodeus and Rune's methods, but it didn't work for my example. I ended up doing a merge on cells B and C as I couldn't really find anything. Thanks for your help.
Try,
<table border="1px" width="100%">
<tr>
<td width="100%" height="100" style="background:#ff0000; display:block">A</td>
<td width="100%" height="100" style="background:#00ff00; display:block">BB</td>
<td width="100%" height="100" style="background:#ff00ff; display:block">CCC</td>
</tr>
</table>
Related
Anyone know why each width:xx% on the table cells are not being used?
Looks like the first row may be set correctly, but the sizes in the second row are being ignored.
http://jsfiddle.net/bobbyrne01/4fLL8md0/1/
<table>
<tr>
<td style="width:80%;">A lot of text on 1 line</td>
<td style="width:20%">Text</td>
</tr>
<tr>
<td style="width:20%">
<label>Directory:</label>
</td>
<td style="width:80%">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
It's not possible any simply way. You can achive that only using more than 2 cells in row and group them.
<table border="1" width="100%">
<col width="20%">
<col width="60%">
<col width="20%">
<tr>
<td colspan="2">A lot of text on 1 line</td>
<td>Text</td>
</tr>
<tr>
<td>
<label>Directory:</label>
</td>
<td colspan="2">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
http://jsfiddle.net/4fLL8md0/2/
As you can see, for this case you need 3 cells with width 20%, 60% and 20%. If you have more rows, more cells or want to divide rows in other percentages, you always need to change the table structure.
Table cells must conform – otherwise it wouldn't be a table! You can use colspan to sorta overcome this limitation.
The way you are trying to achieve the design is totally wrong. There are two ways to do this either use colspan or nested table to achieve this.
You can try the answer given by Panter or try nested table that is the best option as it will be easier to implement and maintain also.
Can someone explain to me why my table isn't laying out the way I would expect?
The column displaying the phone numbers should be as wide as possible, but the cell with the email address is making the column with the number labels wider?
http://jsfiddle.net/NinjaArmadillo/UX3pH/
<table width='100%' border="1">
<tr>
<td rowspan='5'>PIC</td>
<td colspan='2'>First Lastname</td>
</tr>
<tr>
<td colspan='2'>Users Position</td>
</tr>
<tr>
<td colspan='2'>emailaddress.emailaddress#emailaddress.com</td>
</tr>
<tr>
<td><span>business:</span></td>
<td width='100%'><span>123-4567</span></td>
</tr>
<tr>
<td><span>mobile:</span></td>
<td width='100%'><span>765-4321</span></td>
</tr>
</table>
P.S. Please no "You should use DIVs!", I know, this is a small part of a much larger layout and I couldn't get everything to work with DIVs and I'm running out of time, v2.0 will be refactored to use DIVs (If I can get time to make them work)
This will help you td{width:5%}
Demo
IE 9.0 does not render following HTML correctly and I am out of ideas......
Please help.
I CANNOT change "< !DOCTYPE html >". any ideas ?
Thanks.
<!DOCTYPE html>
<html lang="en">
<body>
<table style="table-layout:fixed;" width="100%" border="1">
<colgroup span="120">
</colgroup>
<tbody>
<tr>
<td colspan="120">AAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr>
<td colspan="15">aa</td>
<td colspan="15">ss</td>
<td colspan="90">dd</td>
</tr>
<tr>
<td colspan="120">zzzzzzzz</td>
</tr>
</tbody>
</table>
Colspan = number of columns to combine into a single cell. I am affraid you use it to set width of a column. And that's wrong. Use CSS width property to set width of a column.
<td width="120" colspan="3">
(that was plain HTML) or with CSS
<td style="width:120px" colspan="3">
The markup violates the HTML table mode, as the W3C Markup Validator would tell you, in its somewhat cryptic way. The colspan attribute specifies the number of table columns that a cell spans. You cannot span 120 columns when there are only 3 columns.
It seems to me that what you really want is to divide the available width between the columns so that the relations are 15 : 15 : 90. Simplify this to 1 : 1 : 6 and then turn them to percentages:
<table style="table-layout:fixed;" width="100%" border="1">
<col width="12.5%">
<col width="12.5%">
<col width="75%">
<tbody>
<tr>
<td colspan="3">AAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr>
<td>aa</td>
<td>ss</td>
<td>dd</td>
</tr>
<tr>
<td colspan="3">zzzzzzzz</td>
</tr>
</tbody>
</table>
Using fixed layout, the widths of columns are determined when the first row is processed. Therefore, the widths need to be set in col elements. Otherwise, the browser, when processing the first row, would not have any width requirements, so it would, by the specs, divide the total space evenly between the columns.
I have this table width set to 100%.
Inside I have 3 columns, the middle one should be fixed to 300px. Left and Right columns should be divided equally in the remaining space.
The result is that the col with the image gets stretched. How to fix this so that left and right cols stay the same size?
http://jsfiddle.net/RqhCv/
Important note: Do not add any content to left column, the content must remain
Also must work in IE7
Please Do NOT post answers about DIVs. This question is about tables.
<table style="width:100%;height:100%;">
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#99CC33" style="width:300px;">this is 300PX</td>
<td bgcolor="#0000FF"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"></td>
</tr>
</table>
...
I did try already a lot of things including COLGROUP, nothing works...
This seems to work in making the right and left columns the same size, with the middle column 300px;. I wasn't sure what you wanted to do with the image though.
<table style="width:100%;height:100%;table-layout:fixed;overflow:hidden" >
<tr>
<td bgcolor="#FF0000" style="width:50%;"></td>
<td bgcolor="#99CC33" style="width:300px;"><div style="width:300px">this is 300PX</div></td>
<td bgcolor="#0000FF" style="width:50%;" ><div style="overflow:scroll"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"></div></td>
</tr>
</table>
After few hours of trials I was able to produce this code.
Works in all browsers with a slight shift to the left in Webkit, but I think I can live with that.
This does look dangerous and I don't like it at all, but I tested in latest Crome,FF,Opera,IE9,IE8,IE7, Safari and Safari on iPad. All look OK.
Still, If someone has any input on this or a better solution, don't hesitate to post.
<table style="width:100%;height:100%;">
<tr>
<td bgcolor="#FF0000" style="width:50%;"> </td>
<td bgcolor="#99CC33" style="width:300px;"><img src="p.png" width="300" height="1"></td>
<td bgcolor="#0000FF" style="width:50%;"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" style="display:block;" width="377" height="167"></td>
</tr>
</table>
I am common table layout return in pure html which has 4 columns
<table>
<colgroup span="1" width="20%"/>
<colgroup span="1" width="30%"/>
<colgroup span="1" width="20%"/>
<colgroup span="1" width="30%"/>
<tr>
<td colspan="3">
question data.......
</td>
<td colspan="1">
Answer data......
</td>
</tr>
<tr>
<td colspan="2">
question data.......
</td>
<td colspan="2">
Answer data......
</td>
</tr>
</table>
This layout should work fine with first row columns should have width of 70 and 30% resp
and second row should have width of 50 and 50 resp. But the output what i see different.
what could be the problem and how to fix it. I couple of solutions for it
1. defining width at column level will work
2. defining a blank row with four columns above or below.
But Why is this happening?
In my experience, assigning a column width when using colspan doesn't work. I don't know why, but the width spec seems to be ignored - anyway, it never seems to do what you would expect.