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>
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 this table - http://jsfiddle.net/mark69_fnd/cgwyJ/
Notice, the last column - Notes, it spans all the rows.
How can I make its content to occupy all the rows, rather than cause the table to be the width of the page?
I am looking for something like http://jsfiddle.net/mark69_fnd/cgwyJ/4/, only without resorting to the width css parameter.
EDIT
Exhibit A:
Exhibit B:
EDIT 2
I am not looking for a fixed width table. I just want the row spanning cell to utilize the vertical space efficiently.
Please, do not provide answers involving the width. If you think either width or <br/> are needed, then you can just reply with "Nope, that's impossible".
EDIT 3
OK, there is a great deal of confusion around my question. Probably, because it is not formulated clearly.
Of course, there is a width limit involved somewhere underneath, but it is not a constant. It cannot be baked into the CSS. This is because it is a function of the following parameters:
The height of the available vertical space (N)
The average height of the characters in the given font (A)
The length of the given text, when presented on a single line, again in the given font (B)
Given these parameters, the required width is A * B / N. So, there is a well defined way to formulate what I want, but you just cannot express it with a constant width. So, my question is this - are there means to achieve this declaratively (i.e. in HTML/CSS) using some other attributes/properties?
Hope this clarifies a bit the picture.
Either <br/> The Paragraph or just resort to the width: ; CSS Parameter, and Why wouldn't you want to do that?
but line breaking (<br/>) it all would be the only other option I can think of.
Honestly the CSS way is the best if you ask me, but you could always set the width to that paragraph cell, the problem with that is if there is too much text it will make the bottom row taller than the others.
http://jsfiddle.net/calder12/cgwyJ/6/
<html>
<body>
<table>
<thead>
<tr>
<th>Browser</th>
<th>http --> http</th>
<th>http --> https</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome</td>
<td>CORS</td>
<td>CORS (*)</td>
<td rowspan="3" width="280">If the SSL certificate validation fails, neither CORS nor JSONP will work. However, there is a workaround. The respective request .
</td>
</tr>
<tr>
<td>Firefox</td>
<td>CORS</td>
<td>CORS (*)</td>
</tr>
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.
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/