We Keep Coding

Truncate string based on pixel width

I'm trying to make a string fits in a determined area (td) without breaking line. The problem is: It needs to ...
Fit while resizing
Fit in N kinds of resolution
Add ... at the end when needed (and don't when not needed)
Accept the change of font-size, font-weight, and font-family
Based on the answers on Novon's question, I made the following code:
CSS (// Just adding some styles to break the line)
.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
jQuery (// Find all td that contains a .truncated element. Getting the real width (by removing the content and adding it again) of the td. Applying, if needed, minWidth on the td)
jQuery('.truncated').closest('td').each(function() {
var text = jQuery(this).text();
var widthOriginal = jQuery(this).width();
var widthEmpty = jQuery(this).text('').width();
jQuery(this).text(text);
if(widthOriginal >= widthEmpty){
var width = (parseInt(widthEmpty) - 10) + 'px';
jQuery(this).css('maxWidth', width);
jQuery(this).text(text + '...');
}
});
the result (as expected from the above code) is:
but it should be:
I was thinking, maybe try to find the first line of the string and remove the rest but didn't find a way to do that (and it's a lot of "workaround" for my taste). Is there a better way to do that?

Single line text truncation can be easily achieved using css text-overflow property, which is supported by all major browsers, including IE since version 6.
The thing is that text-overflow alone doesn't do much. It only defines what will happen when there is text overflowing the container. So in order to see results, we first need to make the text overflow, by forcing it to a single line. It is also important to set the overflow property of the container:
.truncated {
display: block;
white-space: nowrap; /* forces text to single line */
overflow: hidden;
text-overflow: ellipsis;
}
jsFiddle example: https://jsfiddle.net/x95a4913/
text-overflow documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

You can do it with pure CSS, see this link for reference:
line clampin
Add those to your css:
.truncated {
display: -webkit-box;
-webkit-line-clamp: 1; // amount of line you want
-webkit-box-orient: vertical;
}
Or you can try clamp.js
https://github.com/josephschmitt/Clamp.js

text-overflow: ellipsis
seems a pure CSS solution
http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Wrap the text twice to achieve this:
<style type="text/css">
.relative_wrap {
height: 1em;
position: relative;
}
.absolute_wrap {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
text-overflow: ellipsis;
top: 0px;
white-space: nowrap;
}
</style>
<table>
<tbody>
<tr>
<td>
<div class="relative_wrap">
<div class="absolute_wrap">
LONG TEXT HERE
</div>
</div>
</td>
</tr>
</tbody>
</table>
Since you use jQuery, it is easy:
$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>');

If you set table layout to fixed and the td overflow as hidden, you could prepend an ellipsis as a float-right div when the td's scroll width is greater than its client width.
Here's the CSS, which includes styles to prevent bleed-through on the table:
table {
table-layout:fixed;
white-space:nowrap;
width:500px;
border-spacing: 0px;
border-collapse: separate;
}
td {
overflow:hidden;
border:1px solid #ddd;
padding:0px;
}
.hellip {
padding-left:0.2em;
float:right;
background:white;
position:relative;
}
jQuery:
$('td').each(function() {
if($(this)[0].scrollWidth > $(this).width()) {
$(this).prepend('<div class="hellip"">…</div>');
}
});
Demo at: http://jsfiddle.net/5h798ojf/3/

Scrollbar on top of DIV and nowrap container

I'm familiar with this StackOverflow question & confirmed answer.
However, checking their fiddle here, I've noticed one thing I really really need. The container (aka div2 class element) doesn't have no-wrap property which I would really really need for my tables inside #container (nowrap for having tables in one row)
My code:
CSS:
.subnetTable {
width: 150px;
display: inline-table;
border:1px solid #E8E8E9;
margin: 2px;
padding: 2px;
white-space: normal;
}
#scroller_wrapper, #container_wrapper{
width: 98%; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;
}
#scroller_wrapper{height: 16px; }
#scroller { width: 500px; height: 16px; }
#container { width: 500px; overflow: auto;}
HTML:
<div id="scroller_wrapper">
<div id="scroller">
</div>
</div>
<div id="container_wrapper">
<div id="container">
<table class="subnetTable"><tr><td>12341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 123412341234 1234123412 34123412341 2341234123412 341234123 412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 123412341 2341234123412 34123412341234 123412341 23412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 1234123412 341234123412 34123412341234 123412341 23412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 123412341 2341234123412 34123412341234 123412341 23412341234</td></tr></table>
</div>
</div>
JAVASCRIPT (jQuery):
// SCROLLBARS
$(function(){
$("#scroller_wrapper").scroll(function(){
$("#container_wrapper").scrollLeft($("#scroller_wrapper").scrollLeft());
});
$("#container_wrapper").scroll(function(){
$("#scroller_wrapper").scrollLeft($("#container_wrapper").scrollLeft());
});
});
// CONTAINER RESIZE
$(window).load(function () {
$('#scroller').css('width', ($(window).width() - 10) );
$('#container').css('width', ($(window).width() - 10) );
});
MY JsFiddle Code & the Problem:
click here.
The problem appears, when you add white-space: nowrap; to #container class. Instead of correct result, it creates another scrollbar at bottom which I wouldn't like. IT does move tables to one row but it doesn't create correct scrollbar at bottom or top anymore (replacing tables with only text doesn't work either).
Please help me out!

With you code as-is the solution is to put a <br> just before the fourth table or wrapping the first three and second three tables in a block level element such as a div.
Why?
Each table is inline - so setting #container to not wrap will make all the inline tables extend out to the right. Adding a break will force it to break as expected.
Note
Please consider using DIVs or some other semantic element rather than tables - your code does not appear to be tabular data.

Creating two-way fixed scrolling of table headers

I have a huge table containing data in vertical and horizontal directions...
Like this: jsfiddle
I am hoping to make the far left column and the top row fixed in a way that when I am scrolling in both directions, I am able to keep the these two (column and row) in place. But only move the content.
How to achieve this with JS/CSS?
I am guessing a pure css solution won't do it, since there is a two-way scroll.
someclass { position: fixed }

The entire code required to answer your question is too large to include here. Instead, I'll link you to the JSBin which holds the answer, and just include the styling and javascript.
The caveats are:
If you are dead set on using tables instead of divs to display your data, then you're going to have a bad time formatting the answer I gave you, especially if the data in the cells are varying widths and heights.
In order to accomplish this, you must go through each row and column header, then set their respective widths and heights to the max between their widths/heights and the widths/height of the rows in the table. The reason why their widths and heights aren't automatically set respective to the rest of the cells in the table is because upon setting their position: fixed style attribute, you basically break them out of the table.
So, if you have the power, consider using divs instead and breaking the row headers out into a separate div you can position: fixed and emulate the current behavior of the column headers.
Another bonus is that you will have a performance increase because jQuery will not be iterating through every row to adjust the row headers every time you scroll.
You must use jQuery UI.
HTML:
<!-- Notice I removed background and border color from table tag -->
<table border="0" width="100%" cellpadding="3" cellspacing="1">
<tr>
<td>Dead Cell</td><!-- this cell is not shown -->
...
CSS:
/* Make white space above table since we broke the column headers out of the table */
table {
margin-top: 51px;
position: relative;
}
table td {
border: 1px solid #FFCC00;
height: 44px;
background-color: #FFFFCC;
}
/* styling for column headers */
table tr:first-child {
position: fixed;
top: 0;
left: 57px;
z-index: 100;
}
/* remove first cell in top left position */
table tr:first-child td:first-child {
display: none;
}
table tr:first-child td,
table tr {
position: relative;
}
table tr:first-child td {
background: orange;
}
table tr td:first-child {
background: orange;
position: fixed;
width: 39px
}
/* Make white space to the left of table since we broke the row headers out of the table */
table tr:nth-child(n+2) td:nth-child(2) {
margin-left: 48px;
display: block;
}
JS:
$(function(){ // When document is loaded and ready
$(window).scroll(function() { // When we scroll in the window
// Move column headers into place
$('table tr:first-child td').css('left', - $(this).scrollLeft());
// Move row headers into place
$('table tr td:first-child').each(function() {
$(this).position({ // jQuery UI overloaded function
my: "left top",
at: "left top",
of: $(this).parent(),
using: function(pos) {
$(this).css('top', pos.top);
}
});
});
});
});
Again, here is the link to the JSBin.

HTML Table with vertical rows

How do I make vertical tables in HTML? By vertical, I mean the rows will be vertical with table headers on the left.
I also need it the way so I can access these rows (in this case vertical) as in a normal table, with <tr>. This is because I get the data dynamically for one row (like for row A) and insert it in the table. I am using angularJS to avoid DOM manipulation, so I am not looking for complex DOM manipulation with Javascript.

If you want <tr> to display columns, not rows, try this simple CSS
tr { display: block; float: left; }
th, td { display: block; }
This should display what you want as far as you work with single-line cells (table behavior is dropped).
/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }
/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }
<table>
<tr>
<th>name</th>
<th>number</th>
</tr>
<tr>
<td>James Bond</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>666</td>
</tr>
</table>

David Bushell has provided a solution and implementation here: http://dbushell.com/demos/tables/rt_05-01-12.html
The trick is to use display: inline-block; on the table rows and
white-space: nowrap; on the table body.

AFAIK, there is no magic solution to switch this around.
As for a rotation(90deg), that would most likely turn the whole table to the side, similar to how a sheet of paper would look if you turned in 90 degrees, and that's not what you want (I think?).
If this is possible (and realistic), I would suggest changing it in the HTML itself.
As indicated in the comments, there is no suggestion here, so here's a basic javascript alternative [even if this is not what you were looking for] using jQuery. Without knowing your experience, I've taken the time to comment everything to be sure you get what the code is doing.
// Change the selector to suit your needs
$('table').each(function(){
var table = $(this), // Reference each table in the page
header = $('thead', table), // Reference the table head
headings = []; // Set an array for each column
// If the table doesn't have a header, use it's footer for column titles
if(!header.length)
header = $('tfoot', table);
// If there's no header nor footer, skip to the next table
if(!header.length)
continue;
// Loop each heading to get the header value
$('th', header).each(function(){
var heading = $(this).html(); // Each heading value content, including any HTML; use .text() to use the text only
headings.push(heading); // Add heading value to array
});
// Make sure the content is wrapped in a tbody element for proper syntax
if(!$('tbody', table).length)
table.wrapInner('<tbody></tbody>');
// Set counter to reference the heading in the headings array
var x = 0;
// Loop through each row in the table
$('tbody tr').each(function(){
var row = $(this),
label = headings[x];
// Add the heading to the row, as a <th> for visual cues (default: bold)
row.prepend('<th>'+label+'</th>')
// Move to the next value in the headings value
x++;
});
});

You can use <th> as the first cell in the row.
Here's a fiddle: http://jsfiddle.net/w5nWG/
#vishesh so you want to transpose your table after DOM ready? try this http://gist.github.com/pgaertig/2376975
$(function() {
var t = $('#thetable tbody').eq(0);
var r = t.find('tr');
var cols= r.length;
var rows= r.eq(0).find('td').length;
var cell, next, tem, i = 0;
var tb= $('<tbody></tbody>');
while(i<rows){
cell= 0;
tem= $('<tr></tr>');
while(cell<cols){
next= r.eq(cell++).find('td').eq(0);
tem.append(next);
}
tb.append(tem);
++i;
}
$('#thetable').append(tb);
$('#thetable').show();
}

<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
table { border-collapse: collapse; }
table tr { display: block; float: left; }
table tr tr{ display: block; float: left; }
table th, table td { display: block; border: none; }

try this
<table>
<thead>
<tr>
<th>id</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
css:
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: right;
}

Maybe this link won't help : rotate a table 90 degrees
neither would this one : http://www.w3.org/TR/html401/struct/tables.html
Otherwise, you can try this, has another user suggested (rejected and downvoted) :
table {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
This sounds silly, but hey, it's not worse than just not knowing the 'verry basic' HTML 4 table model.

How to automatically scale down a 100% div without showing browser vertical scrollbars?

I have a table with three rows. I have 1 main #container div (height 100%) and inside it is a table with 3 rows. The first and last row have fixed size content. In the second row is a #content div with 100% height and overflow:auto. (actually the table has a lot more rows and the page has more divs, but for the sake of clarity i scalled it down for this question).
If there is more content in #content than fits, a vertical scrollbar should appear next to that div's content. However, a vertical scrollbar appears at the browser window itself. When i set the #content div to a fixed size however, that vertical scrollbar does appear in the correct place.
I must be doing something wrong, or maybe misinterpreting something :) Any ideas? Maybe there's jquery/javascript out there that can monitor the page and when loading/resizing the browser, scales down that particular div?
EDIT: I just created a small example: http://wierdaonline.com/softest.html
In the ideal situation, the whole thing (table) should always be visible in the browser window, without any window scrollbar other than in the #content div.

It's much easier to create a fixed header and footer without using tables and using fixed position:
#header
{
position: fixed;
top: 0;
height: 20px;
}
#middle
{
position: fixed;
top: 20px;
bottom: 20px;
overflow: auto;
}
#footer
{
position: fixed;
bottom: 0;
height: 20px;
}

Set overflow: scroll in the div. You shouldn't need Javascript for this.

The #container 100% is 100% of the page height which can be more than the window height. Setting html and body height to 100% (=100% of the window) could help, depending on what you are trying to achieve.

Edit: these changes should work for the height, a similar thing can be done with the width if you so desire.
javascript:
window.onresize = function() {
var tehdiv = document.getElementById('content2');
if($(window).height() < 100) { tehdiv.height = 50; }
else if($(window).height() > 2000) { tehdiv.height = '100%'; }
else { tehdiv.height = ($(window).height()/2);}
};
the content div's table:
<td valign='top' id='content2'>
Would something like this work?
window.onresize = function() {
var minh = 50;
var minw = 50;
var tehh = (window.height/2);
var tehw = (window.width/2);
var tehdiv = document.getElementById('yourdiv');
tehdiv.height = (tehh > minh)? tehh : minh;
tehdiv.width = (tehw > minw)? tehw : minw;
};
That would make it scale to half the window size, as long as it can be bigger whan 50. You could also change the min to max and make it perform tehdiv.height = 100% at that point.

Well since you have no choice but to use tables, I modified the HTML, but actually left the CSS the same from the demo I posted in a comment above, check it out here - the only problem I've found is in IE7 where the header and footer table cell doesn't go 100% across:
CSS
#header, #footer {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
border: #000 1px solid;
margin: 5px;
}
#footer {
top: auto;
bottom: 0;
}
#content {
position: absolute;
top: 25px;
left: 0;
bottom: 25px;
right: 0;
overflow-y: auto;
background: #ddd;
margin: 5px;
}
HTML
<table id="page">
<thead>
<tr><td id="header">Header</td></tr>
</thead>
<tfoot>
<tr><td id="footer">Footer</td></tr>
</tfoot>
<tbody>
<tr><td><div id="content">Content goes here</div></td></tr>
</tbody>
</table>
It's still better to not use tables, if you get around to switching the HTML around.