I'm having issues getting my table to work. I really need to figure out how to use divs more, but right now, I just need it to work.
Here is what I'm doing.. i have a single table 3 column table
Column 1 contains a static text actually says "Select Account"
Column 2 contains a header title
Column 3 contains the select account name
Column 1 has a static width of 220px
Column 2 needs the header to be centered in middle of screen
Column 3 needs to grow depending on size of text
Table is 100% across screen.
Can't seem to figure out how to get it to work.. Column 1 works fine.. column 3 i have centered right, took out width, but middle column wont center correctly...
Any ideas? Maybe a way to do this using a div? Reason I used table is because if browser is small, don't want columns to fall under each other like they do with divs
Sample Code:
<table style="width: 100%" border="1">
<tr>
<td style="width: 220px;">
<span>Please Select Your Account</span>
</td>
<td valign="top" align="center">
<span>HeaderTitle(Centered)</span>
</td>
<td align="right">
<span>This is a really long account name need to keep dynamic</span>
</td>
</tr>
</table>
For those who need it.. http://jsfiddle.net/j5C3z/6/
Please dont use f$%&*(*g tables for layout, If you put up an example of your code I can convert it to a div layout for you and explain more thoroughly...
Fixed as DIV layout:
http://jsfiddle.net/Mutant_Tractor/j5C3z/2/
Related
Trying to get two tables to always display next to one another, but it wouldn't be ideal to condense them into one big table. Currently my code is set up like this:
<table style="margin:0;padding:0;cellspacing:0;cellpadding:0">
<tr>
<td>
<table style="height:100%;width:100%;margin:0;padding:0;cellspacing:0;cellpadding:0">
<caption>Table 1</caption>
....
</table>
</td>
<td>
<table style="height:100%;width:100%;margin:0;padding:0;cellspacing:0;cellpadding:0">
<caption>Table 2</caption>
....
</table>
</td>
</tr>
</table>
The problem is, the tables are leaving gaps in their respective cells and not stretching all the way to the border. This results in something like this
You can see on Table 1 (on the left) where there's still space to the top and bottom, tho Table 2 is working perfectly. How do I eliminate this space and get the table to stretch to the border of the cell?
I tried to set the maximum width for a column in a table (that is, I would like all the cells in that column to have the same maximum width), however my initial attempt failed:
<table border="1">
<tr><td style="max-width:100px">a bunch of text here, it should get wrapped</td></tr>
<tr><td>a bunch of text here, it should get wrapped</td></tr>
</table>
(also at http://jsfiddle.net/Le6H6/4/ )
I was expecting that setting the maximum width for one cell should automatically set it for all the cells in the same column. But somehow the cell in the second row overrules the maximum width I set, and both cells are wider than that width now.
I have 2 questions:
Why is this happening?
I know that setting the max width on every cell in that column (either individually or through an appropriate CSS rule) will achieve what I wanted. But is there also a way to set the maximum width for the column without setting it for every one of those cells?
1) This is happening because this is how HTML tables work. The table re-sizes for the maximum cell width. It makes logical sense, if you think about it.
2) There are ways around this, but nothing that fits your constraints of adding a single style to a single cell.
Sorry if it's not the answer you're looking for. :/
You can't do that way because max-width can be applied on single cell. so u can use<div> to do it especially for that cell or make it for <table>
Try this :
<table border="1" style="max-width:100px;">
<tr>
<td>a bunch of text here, it should get wrapped</td>
</tr>
<tr>
<td>a bunch of text here, it should get wrapped</td>
</tr>
</table>
either use css
tr td { max-with :100px; }
I have the following table:
<table>
<tr>
<td width="10%">Heading1</td>
<td width="15%">Heading2</td>
....
<td width="5%">Heading3</td>
</tr>
....
</table>
the width of the cell is defined by the width of the first row's cells. So far, so good.
If I translate the headings to other language - the text in the cell changes its length and the result is bad looking table - some cell with a lot of space, while for others there is not enough such to display the text in them.
What should I do?
I have try so many different variations - with width - auto/percent/combination of them and nothing works.
Has anyone have an idea how to set the width in a way to work good with the context dynamically?
I think about some JavaScript function too - I can get the text of each heading before construction the html and according to its length to set the width of the table?
The width of the column is the same for all rows, you can't change this behavior. You can omit the width paramater, table will automatically adjust. You can try to set "min-width" css property if you do not want the columns to be too thin.
Lets say that I've got 3 columns, 1 row. I want to have the first column as big as it can get, without making the other columns content to jump down a line(as if there were a linebreak). Like this:
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||| ||||||||||||||||||||||
So the first column should use as much sapace as it can from the table without making any problem for the other two column which should just use as much space they need and nothing more and they should be aligned to the right.
I tried using a set width for it, but as the content of the two last columns rise it creates a problem which force the text to jump down a line.
How can I make this? Thanks in advance!
Make the main cell width="100"%" and add "nowrap" to the other cells.
<table border="1" width="100%">
<tr>
<td width="100%">###</td>
<td nowrap>### ###### ###</td>
<td nowrap>###### ###### ###</td>
</tr>
</table>
Here's my problem: I have an HTML table that looks like this:
What I want is for there to be an additional table row underneath it, except this row spans the full width of the table - but with just one cell. I quickly mocked up an example:
As you can see I added another Table Row below it with a single <td> cell inside containing the text. However I want this cell to span 100% of the width of the entire table - it shouldn't resize the width of the 'Name' column.
Is such a thing possible? I am happy to use jQuery or Javascript if needs be - also, this doesn't need to work in IE as every user is using Chrome (although that would be a perk).
In your case, you'd do something like
<tr>
<td colspan="5">This text should be as long as the entire table's width...</td>
</tr>
The colspan attribute says how many columns the cell should take up. It should work in all browsers that support tables, as it's standard HTML.
In JavaScript, you'd set the colSpan property of the cell, or call .setAttribute("colspan", the_number_of_columns) on it. Either should work. But unless you're generating the cell dynamically, you should just include the colspan attribute in your HTML.
For one cell to span all 5 columns,
<td colspan="5">Lorem Ipsum</td>