I'm making a tabular layout and I really need:
2 columns, of variable width
columns have the same width
columns are no wider than necessary
I have found that "table-layout: fixed" can achieve this, if I set both columns to have "width: 50%". Here's an example:
CSS:
.mytable {
border-collapse: collapse;
table-layout: fixed;
}
.fifty {
width: 50%;
}
HTML:
<table class="mytable" border=1>
<tr>
<td class="fifty">hello</td>
<td class="fifty">x</td>
</tr>
<tr>
<td class="fifty">a</td>
<td class="fifty">longer</td>
</tr>
<tr>
<td class="fifty">reallyreallylong</td>
<td class="fifty">medium</td>
</tr>
</table>
This is exactly what I want, and I'm happy, except that everything goes out the window when this table appears within another table. In that case, all columns shrink to the minimum possible size (at least for my version of Chrome).
Here is a jsFiddle demonstrating my dilemma: http://jsfiddle.net/KTkZm/
Can anyone shed light on this, and hopefully find a way to get the inner table to render as it does outside of the table? Thanks!
Check below jsfiddle link. It's Working Fine.
http://jsfiddle.net/KTkZm/14/
Related
I have two tables inside a table :
<table>
<tbody>
<tr>
<td class="tdkqtb">
<table border="1">
<tbody>
<tr>
<th>Giải</th>
<th>#cityID</th>
</tr>
</tbody>
</table>
</td>
<td class="tdkqtb">
<table border="1">
<tbody>
<tr>
<th>Đầu</th>
<th>Đuôi</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr></tr>
</tbody>
</table>
Now I need to set the width of the two tables fixed. How can I do that? For example I want all tables to have the same width as the first twos. I mean they must have a fixed width for each column, the first table will contains 70% width of the parent table, and the second contains the rest. The columns in the two tables must have fixed width too!
Not sure if I understood what you want but you can just select the required element of the table or the whole table and give a width in css
table {
width: 70%;
}
If you have multiple tables, give them ids or classes to seperate for different styles. Same for the th, tr, td and so on.
First of all, why not going Tableless?
Then you have to put some CSS into it, like DasBoot said, to give a full table a width you should do this:
table {
width: 70%;
}
The same thing for specific td, tr, th or whatever element you want to style. If what you are going for is a maximum width or a minimum width you can use max-width and min-width appropriately. Why not put this code on a jsfiddle and test the results live to see what you need to do?
Regards.
I have a table with width:100% and it should have 3 columns as follows:
[50%-space/2][space][50%-space/2]
Now, I have this already
<table style="width:100%"><tr>
<td>left</td>
<td style="width:20px"></td> //space
<td>right</td>
</table>
This works fine, as long as there is always a "left" and "right" width the same width, but it stops working if one has a different width:
<table style="width:100%"><tr>
<td></td>
<td style="width:20px"></td> //space
<td>right</td> // right takes all the space from the first td
</table>
And if I set "left" and "right" each to 50%, the space in between is omitted:
<table style="width:100%"><tr>
<td style="width:50%"></td>
<td style="width:20px"></td> //space
<td style="width:50%">right</td> // right takes all the space from the first td
</table>
Unfortunately, the space cannot be in % in this case (which would solve the problem easily). Also using CSS columns is not (yet) an option.
Is there a solution for this?
JSFiddle
Example: http://jsfiddle.net/9yVx9/1/
use table-layout: fixed property
table {
table-layout:fixed;
}
Screenshot
I'm trying to recreate a daily schedule view in a mobile website design. The PC version looks like this:
It will have several rows, and up to 5 or 6 columns. I think a table will be best, but can't find the right CSS/HTML to get this to work how I want.
I want the first column to have an auto width, to fit the content, and the rest to be equal (evenly distributed). The entire table will be 100% width.
I can get this by setting the column widths as follows: 0; 50%; 50%; -- and not using table-layout: fixed; The problem is, I can't have the width of any cells getting wider just because the content is too large. If I use table-layout: fixed, it keeps the cells the correct size, but the first column is 0 width, instead of auto/fit. I tried placing the content inside each cell in a span or div and setting those to: width: 100%; overflow: hidden;, but I don't think the width: 100% really works inside a table that isn't fixed.
If I really have to, I'll set a fixed width for the first column, but I'd like to avoid this because I don't want to use fixed font sizes -- especially because this will be a mobile website, for smart-phones and tablets.
I might be able to do something by using nested tables or floats... the first column not being part of the same table, but I'm hoping there is a super clean solution I'm missing, and I can keep all of this in a single table.
EDIT: As requested, here is one version of my code that I have tried. The styles with x in front of the names are just different things I have tried (I add the x to quickly remove, and easily put back):
<table cellpadding="0" cellspacing="0" style="width: 100%; xwhite-space: nowrap; xtable-layout: fixed;">
<tr>
<td style="width: 0; background-color: Lime;">
Time
</td>
<td style="width: 50%; background-color: Silver;">
ERIC
</td>
<td style="width: 50%; background-color: Gray;">
DONNA
</td>
</tr>
<tr>
<td>8:00am</td><td> </td><td>Do Something</td>
</tr>
<tr>
<td>9:00am</td><td style="width: 50%; overflow: hidden;"><div style="width: 100%; height: 100%; overflow: hidden;">Do Something else with more text so we can see how this works when too long and really longer than it ever should be</div></td><td style="width: 50%;"> </td>
</tr>
</table>
The above version is as close as I've got, but the long text for "ERIC" at 9am wraps to multiple lines. If I change it to not wrap, then the cell gets too wide (even with overflow: hidden).
Your table width is 100% and the second and third columns are width 50% each and your first column is 0%. Definitely, it doesn't work because it has already used up the 100% width for the second and third columns.
In case it isn't possible to do what I want with one table, here is a nested table solution that doesn't seem as bad as I thought:
<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 0;">
<table cellpadding="0" cellspacing="0">
<tr><td>Time</td></tr>
<tr><td>8:00am</td></tr>
<tr><td>9:00am</td></tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" style="width: 100%; table-layout: fixed; white-space: nowrap;">
<tr><td>ERIC</td><td>DONNA</td></tr>
<tr><td style="overflow: hidden;">This cell has a lot of text so that I can test for overflow issues even if I make my browser window very wide</td><td> </td></tr>
<tr><td> </td><td>Whatever</td></tr>
</table>
</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/fWFPm/4/
I have a table nested as such:
<table>
<tr>
<td>
<table>...
</table>
</td>
</tr>
</table>
More precisely:
some style info:
div.centered{
text-align: center;
height:100%;
}
div.centered table.centeredT {
margin: 0 auto;
text-align: left;
max-width: 781px;
overflow: hidden;
height:100%;
}
Layout:
<table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" >
<tr>
<td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;">
<table style="table-layout:fixed;height:100%;min-height:100%;border:solid 1px black;" border="0" id="Table1" cellspacing="0" cellpadding="0" class="verdanaSmall" width="257px" >
<!--this first row is simply a spacer row because I am using table-layout:fixed attribute -->
<tr>
<td width="80px"></td>
<td width="175px"></td>
</tr>
<tr >
<td colspan="2" style="height:100%;">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;">
<tr>
<td style="text-align: left; vertical-align: middle;"> 1.) </td>
<td align="center" height="20">
<a href="results.asp?pubid=31422&date=10%2F11%2F2010&ttype=eqq"target="_top">
<font face="Verdana" size="2" color="#22476C"><b> Abilene Reporter News </b></font>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><font face="Verdana" size="1" color="#22476C"> Monday, October 11, 2010 </font></td>
</tr>
<tr>
<td align="center" colspan="2" height="100%" id="imagetd">
<a href="../PDFView/PDFView.aspx?pgID=32065209&adID=96332396&ref=50" target="_blank">
<img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for this is that the page is filled dynamically and the inner table is inserted inside a data loop. Anyway, the question is that the inner table is not filling 100% of the available height of the encapsulating td cell. I have set the inner table height, via css, to 100%, the encapsulating table, and also the body tag and so on up the chain. If you look at the page in firefox and opera it lays out perfect but IE does not seem to be obeying the height specifics and just making the table big enough to display the data, does anybody know of a hack/fix for IE, or a way I can correct this..?
As the problem describes: the td-element itself does automatically stretch to 100%, but (in IE) for some reason its height is not passed to its children as 100%.
The solution is quite simple: just add 'height: 100%' to the td-element that is parent of the nested table. This way 100% height will be passed to the td's children when using height: 100%; on them.
It fixes the problem in IE and doesn't seem to cause any problems in other browsers (tested on new browsers Chrome, Firefox and IE).
NOTE: setting the td's height to 100% with an nested table may cause the cell to expand too much. In that cause the height may have to be adjusted to compensate the height of the other rows. With CSS3 this can be easiliy achieved with calc(100% - [height of other rows])
PS: I'm aware that the above question is really old, but I stumbled upon this while googling for a simular problem and it seems no (correct) answer has been provided to this one. For others who will find this page just like I did, it might be helpfull to find an
answer.
Try set padding:0px; on cointaner and inner table.
Ok I havent tested anything but it doesnt look like you have set the inner table height to 100%. You have a class table.centeredT but you have not specified the class on the table. Nor have you specified height: 100% on the inner table itself. Give me a few more minutes and I will try to achieve this on jsfiddle.
Edit: One thing which did just occur to me - which wont be causing the problem but just decreases the code a bit - is that you could use the col attribute instead of an extra row at the top. I have heard that this isnt 100% supported, but I have never had a problem with it personally.
Edit: Ok I have no idea... spent ages on this and not getting anywhere. I personally havent used tables in months - I am good enough at divs, float and clear and alike that I can easily make what looks like a table without a table. If I had to display data in a meaningful way then I would use a table. Is this for displaying data, or can it be displayed just using divs / float / clear?
You need to have fixed heights of the elements that should be spanned to 100% height. Fixed heights means you'll have to set them in pixel height instead of percentage. See this SO question and solution with similar code:
Iframe { height:70%;} not working in IE 8 and Firefox
I have to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax