I am trying to stop <td> content from wrapping. Table cell contains two numbers: value and its percentage. The second number shall be smaller and keep constant distance from the first one (whatever the value will be) so all will be better aligned for readability.
It works, however when resizing window at some point cell content starts to wrap, and <small> content is put in the new line.
I would like browser to treat both numbers, the whole cell content, as a one monolithic text.
I will be also happy with any other solution than <small class="text-muted fixed-width-45px"> which will help to keep small number in the constant distance from the big one, as far as it solves wrapping issue same time.
I use Bootstrap 3.
<td class="text-right">123,00<small class="text-muted fixed-width-45px">(23%)</small></td>
CSS used for constant distance between two numbers:
.fixed-width-45px {
width: 45px;
display: inline-block;
}
Add white-space: nowrap to the table cell.
Related
I wonder whether it's possible for DivIcon to have a dynamic size.
The context:
On my map, hovering over a country will trigger a tooltip with the country's name.
I also have several DivIcons, with the following code:
folium.Marker(
location=[lat, lon],
icon=folium.DivIcon(
html='''
<div style="background-color: red; display: inline-block;">
<span>
{region_name}:
<br />{region_info}
</span>
</div>
''',
icon_size=(100, 100),
icon_anchor=(0, 0),
)
).add_to(map)
Because of the variation in region_names and region_infos, the width of the content varies between 50 and 90 pixels. I want my text to be displayed on two lines and the div to fit its content: the display: inline-block property in the html allows me to do this, even if my icon_size is constant.
But the problem is that the size of the DivIcon affects the tooltips: I can have a 70px-wide block with content, but an area of 30px next to it which doesn't display as a block but still counts as that block. So if I hover out of the visible block, instead of the tooltip appearing with some country's name, nothing happens. This is especially problematic when this area covers a bunch of small countries.
What I'd like to happen is for the DivIcon to fit to the html within, or to have some kind of dynamic behaviour. I have tried doing icon_size=(10, 10) or removing icon_size, but the block just shrinks to fit to the longest word in the content. I have tried to go through the code for folium.DivIcon and up the inheritance tree (branca.MacroElement, branca.Figure, etc.), but wasn't able to get control of this behaviour.
Any suggestions welcome.
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 really could use some help with some style issue I fail to get solved:
Scenario:
Inside a web application I have a table visualizing a list of entries. Two of the columns can take longer content, which is chopped for display using "overflow:hidden;"and applying a "text-overflow:ellipsis". The content of all table cells is wrapped into spans so that I can apply animations whilst populating the table. All fine.
Now I want to change the tables layout from its former fixed style to a more liquid behaviour.
Before I had fixed width settings for the table columns. For all except two columns I keep the fixed width, even for one of the ellipsis-style-chopped columns. The other one gets a width of 100%, so that the table consumes the whole available container, thus giving a liquid style ("always use whole screen"). The column shows its content plus some whitespace which is used to pad as required.
Desired behaviour:
I expect the table to shrink when the windows size is decreased. This should obviously happen by reducing the width of the column set to 100%, since it is the only one without a fixed length. That part works only as long as the cells content fits in. As soon as the window gets that narrow, that the content does not fit any more a scrollbar is applied by the browser. This is not what I want. Instead I want the ellipsis-style-rules to chop that cells content, so that the table actually gets smaller, maybe up to a min-width.
Test case:
HTML:
<div>
<table>
<tr>
<td class="c1"><span class="ellipsis">Alfreds Futterkiste</span></td>
<td class="c2"><span class="ellipsis">Maria Anders</span></td>
<td class="c3"><span class="ellipsis">Germany</span></td>
</tr>
<tr>
<td class="c1"><span class="ellipsis">Laughing Bacchus Winecellars</span></td>
<td class="c2"><span class="ellipsis">Yoshi Tannamuri</span></td>
<td class="c3"><span class="ellipsis">Canada</span></td>
</tr>
<tr class="alt">
<td class="c1"><span class="ellipsis">Königlich Essen</span></td>
<td class="c2"><span class="ellipsis">Philip Cramer</span></td>
<td class="c3"><span class="ellipsis">Germany</span></td>
</tr>
</table>
</div>
CSS:
table{table-layout:fixed;width:100%;border:solid gray 1px;}
/*table{table-layout:auto;width:100%;border:solid gray 1px;}*/
tr{}
td{}
td.c1{width:100%;}
td.c2{width:6em;}
td.c3{width:4em;}
/* formatting the clipped output */
.ellipsis{display:block;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;width:inherit;}
/* just for the test case */
div{display:block;width:90%;margin:1em;background-color:silver;}
span{padding:2px;width:inherit;}
I prepared a fiddle with that test case for you to play around:
http://jsfiddle.net/UgYFs/3/
When you decrease the windows width (or the width of the left bottom "Result" compartment) you can see how things work. This is the behaviour that I want.
The problem: (thus this question...)
This only works with a "table-layout:fixed;". Makes some sense, however there are reasons that make this option unavailable: in the real application the tables rows are inserted dynamically. This does not work with a fixed layout, at least the optical result is quite different (which also makes sense). So if I like it or not, I think I have to go with a "table-style:table" (the default). You can switch to that in the CSS compartment by uncommenting the second line, thus changing the table-layout. You see that the behaviour changes.
My question:
Is there a way to combine both things:
to get the desired behaviour as described and demonstrated
to fill the table without a fixed layout (maybe switching the layout later) ?
Until now I failed to succeed. But I am just a bloody beginner in all this stylish web stuff...
Right, since no one had an idea I tried a different approach to what I was asking about were. I want to close this question, so I post the outcome, even if it is not a solution to what I asked here...
I succeeded to modify the rest of the app such that the way the table is filed dynamically works even when table-layout: fixed; is set. This allows me to use standard css table rules to keep that single column flexible in width but still limited in length because the whole tables width can be derived from the container now.
I want a table containing a column of decimal numbers, of varying length before and after the decimal, with the decimal points all aligned.
The column width must have a "liquid" size, expanding as necessary to accomodate EITHER a very long number in ANY of the data cells, OR a very long HEADER pertaining to that column.
Cells containing integers (no decimal point) should still display the numbers with the digits aligned in the same position as if a decimal character was present. (eg. The number 512 should still have its digits aligned correctly with the cell containing only "512" instead of "512.")
The font should be irrelevant; monospaced should not be a requirement.
Finally, the numbers must also be centred in the column as best as possible, while keeping the decimals (visible and implied!) aligned.
Specifically, the "left-side blank gap" of the cell with the most characters before the decimal character (or simply most characters if there is no decimal character present) must be of equal width as the "right-side blank gap" of the cell with the most characters after the first decimal character.
I specifically say "characters" instead of "numerals" for the final requirement, because the table layout should handle symbolic characters such as positive/negative signs prepending the numerals, and letters such as measurement unit acronyms appending the numerals.
The HTML 4.01 specification, "by the book", allows such a layout to be done very easily with a simple HTML table. (Split the data on its decimal character across the two inner cells of a 4-column colgroup, with the outer two col width="*" and inner two col width="0*". Right-align the cell with the integer-portion of the number, and left-align the cell with the decimal character and fractional-portion of the number. Set both those cells to nowrap, then set the table's cellpadding="0" cellspacing="0" rules="groups".)
But a number of people say this is bad, and that CSS should be used instead of tables for formatting purposes. I also understand that a table with semantically-correct data should keep these numbers intact in a single cell. But I have not found any CSS method of acheiving the desired formatting!
Simply setting a single column's text alignment to "center" doesn't keep the decimal points aligned.
Unless I am mistaken, using align="char" can't handle integer numbers that don't have an explicit decimal point, but still need to be aligned as if they did.
Appending a decimal character to integer numbers, even if hiding it, technically breaks the data integrity.
Padding the data with non-breaking spaces doesn't work with proportional (non-monospaced) fonts. And this hack too would break the data integrity.
Specifying position by fixed pixel offsets doesn't permit the column to have a truly "liquid" width, rendered as necessary to fit the contents of all cells in the column, including the header cell, which could contain data of any length at any time.
JavaScript that reads the resulting width of the table after it is rendered, then dynamically calculates pixel offsets, and then rewrites the formatting via DOM to "slide" the data into alignment is slow, and visually disrupting as the data jumps around. And it's an outright dirty hack that's even dirtier than using tables for layout purposes!
It almost seems to me like the "purist's" CSS-layout + HTML-semantic-data approach is incapable of doing this simple but often-desired layout!
I'm hoping someone can please prove me wrong, and show me how to do this layout "properly".
There is a pure html/css solution for this, but it's not pretty. You need to separate the decimal aligned column into two columns, with no padding between them. The first column has the integer value and is right aligned, the second has the decimal and the decimal value.
<table>
<thead>
<th>customers</th>
<th colspan="2">balance</th>
</thead>
<tbody>
<tr><td>John</td> <td>4</td><td>.45</td></tr>
<tr><td>Jane</td> <td>20</td><td></td></tr>
<tr><td>Jim</td> <td>2,300</td><td>.64</td></tr>
</tbody>
</table>
<style>
th {
text-align: center;
}
td:nth-child(2) {
text-align: right;
padding-right: 0;
}
td:nth-child(3) {
position: relative;
left: -0.2em;
text-align: left;
padding-left: 0;
}
</style>
You could also use classes like ".integer" and ".decimal" as opposed to :nth-child selectors. That would be more robust, but I was trying to keep the markup short.
There is no way in raw HTML to do this. I wrote a jQuery plugin to solve just this problem. See https://github.com/ndp/align-column
It's simple to use with your uncorrupted table:
$('table').alignColumn(3); aligns column index 3.
Given your requirements, there is no solution (even to the simpler issue of aligning to the decimal point).
I think the "charoff" attribute is what you need. Unfortunately, many browsers don't support it ...
http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#adef-charoff
Have you tried to divide each number into 2 strings? For example
"1234.567" will be "1234." and "567"
Then you can put the first string in a cell (right aligned), and the other part in the next cell (left aligned)