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; }
Related
I create a simple html file and saved it as "xls". it contains a table with rows.
Some of the rows contain wrapped text.
The height of each row is not auto sized, I can only see one line. If I double click the row in excel, the size will automatically be set to "auto height".
Here is a short video of how it shows up in excel.
Is there a property I can use to set an automatic height for all rows?
This is how I use it now:
<table>
<tr>
<td>Hello<br style="mso-data-placement:same-cell;" />world</td>
</tr>
</table>
Maybe is there some magical "mso-data-.." style placement I can use?
I created a simple table to give a good view of my data.
The problem is created by field LIGHT_EXCEPTION, it not contains space, the content is very long and unfortunately I lose formatted table because i am not able to control the width of column. If I insert a space into LIGHT_ EXCEPTION the system control this case and I not lost the format table column.
Question: there is an alternative mothod to control this case?
I want that the column size table is fixed and when arrive at the end column continue to the next line automatically.
You can see in this attachments that the last column (8 column) is shifted to left. I want that if content is too long go to the next line automatically to continue the text.
According to the CSS specifications, ยง17.3 Columns:
'width'
The 'width' property gives the minimum width for the column.
So, if the text inside a column is particularly long, the table width algorithm can decide to make the column larger than its width property.
If you want to set a fixed width for the whole table, use width on the table element; for example:
<table style="width:12cm">
<tr style="...">
...
</tr>
</table>
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.
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>