CSS/Javascript to force html table row on a single line - javascript

I have an HTML table that looks like this:
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps |two test |
-------------------------------------------------
But I want it to hide the overflow. The reason here is that the text contains a link to more details, and having the "wrapping" wastes lots of space in my layout. It should like this (without increasing the widths of the columns or the table, because they'll go off the screen/create a horizontal scrollbar otherwise):
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
I've tried lots of different CSS techniques to try to get this, but I can't get it to turn out right. Mootables is the only thing I've found that does this: http://joomlicious.com/mootable/, but I can't figure out how they do it. Does anyone know how I can do this with my own table using CSS and/or Javascript, or how Mootables does it?
Sample HTML:
<html><body>
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table></body></html>

Use the CSS property white-space: nowrap and overflow: hidden on your td.
Update
Just saw your comment, not sure what I was thinking, I've done this so many times I forgot how I do it. This is approach that works well in most browsers for me... rather than trying to constrain the td, I use a div inside the td that will handle the overflow instance. This has a nice side effect of being able to add your padding, margins, background colors, etc. to your div rather than trying to style the td.
<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>
<div class="hideextra" style="width:200px">
this is the text in column one which wraps</div></td>
<td>
<div class="hideextra" style="width:100px">
this is the column two test</div></td>
</tr>
</table>
</body>
</html>
As a bonus, IE will place an ellipsis in the case of an overflow using the browser-specific text-overflow:ellipsis style. There is a way to do the same in FireFox automatically too, but I have not tested it myself.
Update 2
I started using this truncation code by Justin Maxwell for several months now which works properly in FireFox too.

This trick here is using the esoteric table-layout:fixed rule
This CSS ought to work against your sample HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
You also ought to specify explicit column widths for the <td>s.
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.

Try:
td, th {
white-space: nowrap;
overflow: hidden;
}

Where ever you need to text in one line put this code
white-space:nowrap

For those further interested:
Existing Dynamic Table Cells: ## Long text with NO SPACES i.e. email addresses ##
It appears a full replication of the MS (and others) use of text-overflow:ellipsis cannot be duped in FireFox so far as adding the internally appended … to clipped text is concerned; especially without javascript which is often user switched off these days.
All ideas I have found to help me have failed to address dynamic resizing and long text without spaces.
However, I had a need for clipping in a dynamic width table in one of my progs admin windows. So with a little fiddling an acceptable all browser answer can be hacked from the supplied samples at “MSDN”.
i.e.
<table width="20%" border="1" STYLE="position: absolute; top: 100;">
<tr>
<td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;">
<DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV>
</DIV>
</td>
</tr>
</table>
Only small shortcoming is Firefox users don’t see the “…” bit; which is summink I don’t really mind at this stage.
Future FF should, hopefully, resolve gracefully if implementing this very important useful option. So now I don’t need to rewrite using less favorable futuristic non tabled content either (don’t argue; there’s plenty of broken web sites around ’cause of it these days).
Thanks to:
http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx
Hope it helps some bod.

As cletus said, you should use white-space: nowrap to avoid the line wrapping, and overflow:hidden to hide the overflow. However, in order for a text to be considered overflow, you should set the td/th width, so in case the text requires more than the specified width, it will be considered an overflow, and will be hidden.
Also, if you give a sample web page, responders can provide an updated page with the fix you like.

If you hide the overflow and there is a long word, you risk loosing that word, so you could go one step further and use the "word-wrap" css attribute.
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx

I wonder if it might be worth using PHP (or another server-side scripting language) or Javascript to truncate the strings to the right length (although calculating the right length is tricky, unless you use a fixed-width font)?

Use position:absolute; and width:xxx%; on the td-Element.

If you don't want the text to wrap and you don't want the size of the column to get bigger then set a width and height on the column and set "overflow: hidden" in your stylesheet.
To do this on only one column you will want to add a class to that column on each row. Otherwise you can set it on all columns, that is up to you.
Html:
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td class="column-1">this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table>
stylsheet:
.column-1
{
overflow: hidden;
width: 150px;
height: 1.2ex;
}
An ex unit is the relative font size for height, if you are using pixels to set the font size you may wish to use that instead.

Related

Problems with the last chrome update - CSS

so, i'm an intern on my company, and need to deal with some stuff that i'm not 100%.
The thing is, the last google chrome update crashed some css in my java web app. We do work with a table, based on scrum. Basicly a taskboard, where you can set a task, remove it, set is as "to do, doing and done". But, since 12/12 +/- your task was missing from the taskboard. We didn't knew what was going on at the begining, but after a little research we found out that the style of the 'height:100%' of tr td was crashing, and making everything desapear. It works fine in firefox and also in IE. when we did remove the height, the tasks appeared. But the thing is, without the height:100% the jquery droppable ui, that we use to move the tasks inside the table was set to the height automatically, even when it is with height 100%.
We don't want to set a minimal height, because it was supposed to work pretty fine.
Here is the code, it's a little big to text in here, so i typed it on jsfiddle.
https://jsfiddle.net/rychardgoltara/bvw1hkxg/
<tr data-bind="attr:{id: sequencial}" id="2093" class ="selectable">
<td class ="historia" style="height:1px">
<div class="colapsada" style="display:none;">
</div>
<div class="expandida">
<div class="historiaLayout">
<span id=""></span>
</div>
</div>
</td>
<!-- ko foreach: {data: $root.fases, as : 'fase'} -->
<td data-bind="css : 'fase-' + id" class="fase-7">
<div class="colapsada"></div>
<div class="expandida tarefaExpandida">
<div class="nomeFase fase">
<span class="tamanhoVariavel sh-tooltip" data-bind="text: titulo, attr: {'aria-label': titulo}" aria-label="A Fazer">A Fazer</span>
}
.tabelaQT tbody tr td {
border-right: 1px #ccc solid;
height: 100%;
}
.tarefaExpandida {
margin: 5px;
overflow: auto;
height: 100%;
One of our solutions was setting the height:100% on tr td and also setting it to height:-webkit-calc(0px). So it can work fine on chrome without affecting other browsers. But the thing is, this solution is the real solution? Am i missing something? And if this is the solution, why is it? I don't know how to explain the solution to my boss. Here is a pic of what is looks like, and what should looks like.
https://imgur.com/a/DXthL

How do I left align the one table and right align the other table that uses the same class?

Initially, I can't change the class name for instance:
<table class="firsttable"> This is the firstable that must be left align
<tbody>
<tr>
<td>
<table class="firsttable"> And this is the second table that must be center align
<tbody>
<tr>
<td>
How do I code it in css?
You can use below CSS, It works as intended
<style>
.firsttable:nth-child(1) { text-align:left; }
.firsttable:nth-child(2) { text-align:right; }
</style>
It's CSS3 though.
First table CSS selector:
.firsttable:first-of-type
If second table is last:
.firsttable:last-of-type
Otherwise, second table CSS selector is this:
.firsttable:nth-of-type(2)
Use ids:
HTML:
<table class="firsttable" id="table1">
...
</table>
<table class="firsttable" id="table2">
...
CSS:
#table1 {
text-align:left;
}
#table2 {
text-align:right;
}
Does this work?
In this case it is better or from my sense I always make it by adding an inline style in the table and I think their no need to create any other style for it in CSS.
<table class="firsttable" style="text-align:left"> This is the firstable that must be left align
And the second table may be another inline style of text-align:center
<table class="firsttable" style="text-align:center"> And this is the second table that must be center align
It is the best approach. But you can also can create some different id here or
.firsttable:nth-child(1) { text-align:left; }
.firsttable:nth-child(2) { text-align:center; }
Problem in this is if you use it then if another table appear in this web page area than it will arise a problem. So it is better to use inline style in this case.
If you want to move the table to the left and one to the right add the following to the appropreate table.
For the align right. Add this at the opening tag <table>.
style="float:right;"
For the algin left add the same code to the exactly same place but change the "left" to "right" depending on where you want it to be.
To aling text do as the other people have seggested.
J. Carter :)

Vertical (rotated) text in HTML table headers

My table headers are much wider than the data in the table, so I am trying to rotate the text in the headers to save space.
I've been trying out the suggestions in this question, and I've also taken a look at this and this.
However, none of the answers seem to actually work: here is my attempt in a JSFiddle.
The text can rotate, but the <th> elements don't resize properly, which was the whole point of trying to rotate the text.
Now that it's been 2-4 years since those questions have been asked, are there any new solutions to this problem?
You could use CSS to select the thead and size the rows accordingly:
DEMO: http://jsfiddle.net/uo44ub6L/
CSS:
thead th {
height: 130px;
}
Another method would be to use rowspan="5" to create a larger th but you would need to add some blank rows, and you would get the same effect. Either would work.
If you need to do this dynamically, you could use javascript to select the th and adjust the size on the span length and font size.
You can use
writing-mode: vertical-rl; text-orientation: mixed;
this will get the work done for you , Here is JSFiddle of it .
This is now possible without any browser specific transforms that you used in your attempt. Note that the wrapping span is required as of 2022 in order to get firefox in particular to center the rotated text within the column (webkit does this by default). I also suggest you rotate the text at a slight angle as demonstrated here as it (IMHO) makes it easier to read.
<style type="text/css">
#myTable td {
text-align: right;
}
th.r span {
transform: rotate(185deg);
writing-mode: vertical-lr;
}
</style>
<table id="myTable" border="1" cellpadding="2" style="border-collapse:collapse;">
<tr>
<th class='r'><span>Display</span></th>
<th class='r'><span>Year made (TV?)</span></th>
<th class='r'><span>Native Res</span></th>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);">Dell U2410 (game) </td>
<td>2010</td>
<td>1080p</td>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);">Dell U2410 (sRGB)</td>
<td>2010</td>
<td>1080p</td>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);"> Sony 40VL130 (game)</td>
<td style="color:rgb(0, 0, 255);">2008</td>
<td>1080p</td>
</tr>
</table>

ol outside of table element

I just try a table with <ol> as list elements with which it is possible to insert new table row.
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody>
<ol id="list">
<li><tr><td>row</td><td>row</td><td>row</td></tr></li>
</ol>
</tbody>
However, I have the problem that the element appear outside of my tables. When I add dynamically content via .append(), the formatting is not taken some elements gets removed.
Jsfiddle example
I want to use this solution for counting currently positions in an "container list".
I got a similar function like the example below for counting my lists, that's working great but the insert into the table does not work properly.
countinglists example: Nested ordered lists
Maybe its possible to achieve that counting syntax in a table without the <ol>? or is there any <ol> equivalent?
You need to do some reading on basic HTML: http://www.w3schools.com/html/html_tables.asp
Here is how it should look...
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody id="list">
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
</tbody>
In theory, you should be able to use CSS counters.
table {
counter-reset: myTableCounter;
}
thead th:first-child:before {
display: table-cell;
content: "";
}
tbody td:first-child:before {
display: table-cell;
counter-increment: myTableCounter;
content: counter(myTableCounter);
}
However, when I attempted to do that I found there were issues with display: table-cell generated content.
You may have to look at adding additional elements to the table to generate the content inside the first cell of each row.
My question is: what are you trying to achieve? Is this an exercise just to see how much can you stretch the HTML?
For your jsfiddle, the action associated to the click removes some of the HTML tags (at least on my browser) resulting in a <li>rowrowrow</li>, so you end up having a rather odd formatted-table. My renderer takes all <li> tags added by clicking as the content of a row; if you have only <li> tags, the dom parser will likely wrap them into a <ul> (it does on mine).
IMHO you don't need to use the ol to be able to count stuff. You can do it in jquery afaik. If you insist to use lists, then you probably need to style them and use e.g. divs inside (styled too). Emulating a table via a list and divs is madness imho :)
Update - for the hierarchical table
My idea would be to have something similar to this jsfiddle. I basically styled in the .sub and the .main classes. However, things get a bit more complex is you need to add some extra columns. In this case, you'd need something like a treetable.

Table - fixed header, scrollable body, most robust/simple solution? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML table with fixed headers?
Looking for a solution to create a table with a scrollable body, and a static/fixed header.
Searching around seems to produce MANY flaky pieces of code, either not working in IE, requiring a huge amount of Javascript and tweaking, or a silly amount of CSS hacks etc.
To be honest, if it's a case of CSS hacks or Javascript, I think I'd prefer to go the Javascript option.
The alternative I guess is to place it all in a div, and just scroll the entire table - but that's a bit naff :D
I've just put together a jQuery plugin that does exactly what you want. Its very small in size and really easy to implement.
All that is required is a table that has a thead and tbody.
You can wrap that table in a DIV with a classname and the table will always resize to fit in that div. so for example if your div scales with the browser window so will the table. The header will be fixed when scrolling. The footer will be fixed (if you enable a footer). You also have the option to clone the header in the footer and have it fixed. Also if you make your browser window too small and all columns can't fit...it will also scroll horizontally (header too).
This plugin allows the browser to size the columns so they aren't fixed width columns.
you just pass the DIV's classname to the plugin like so: $('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); and the plugin will do the rest. FooterID is a element on the page that contains the mark-up for your footer. this is used if you want to have pagination as your footer.
If you have multiple tables on the page it will also work for each table you want to have a fixed header.
check it out here: http://fixedheadertable.mmalek.com/
Keep in mind its still 'beta' so I am adding new features and bug fixes daily.
Supported browsers: IE6, IE7, IE8, FireFox, Safari, and Chrome
Here is a link to my response to another person who had the same question: Frozen table header inside scrollable div
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .
The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.
CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.
If you can fix the column widths - it's a lot easier. If you want the browser to figure out the widths, it gets a lot harder. Basically, have the table in div that scrolls (height, overflow:auto) and have that div inside a position:relative div. In the outer div, have another div position:absolute, overflow:hidden, height: whatever the header height is, set this div's innerHTML to the innerHTML of the inner div; Here is a page that demonstrates. There are lots of gotchas, but it's doable...
<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
<div id="inner" style="height:100px; overflow:auto;">
<script>
var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
var width = Math.floor(Math.random() * 100);
var d = '';
for(var i = 0; i < width; i++){d += 'a';}
for(var i = 0; i < 100; i++){
html += '<tr><td>' + d + '</td><td>some more data</td>';
}
html += '</table>';
document.write(html);
</script>
</div>
<div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>
<script>
function doit(){
var inner = document.getElementById('inner');
var secondWrapper = document.getElementById('secondWrapper');
secondWrapper.innerHTML = inner.innerHTML;
}
</script>
</body>
</html>
Note as you refresh and the data size changes, the header matches up perfectly. That's the real trick.
I believe that the solution is to set an explicit height for the tbody and set the overflow to auto or scroll. Unfortunately, as you've discovered, tables and CSS are a tricky combination, and IE likes to choke on it.
How about this:
<table style="width: 400px;">
<thead><tr> <th> head </th> </tr>
</thead>
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;">
<tr> <th> .. </th> </tr>
</tbody>
</table>
There was also a quiz for just this sort of thing on Sitepoint, for those looking for a non-JS solution. However I found that the table footer was necessary for stopping the table headers from collapsing their widths IF the contents of the cells weren't wide enough. I ended up hiding the tfoot in the application I used this on.
It's pure HTML/CSS and works in IE6 plus modern browsers. There are some styling limitations for the header though.

Categories

Resources