I've got a table on a webpage, with (say) 8 columns, and it's worked just fine until recently...
A user registered with an email address for a display name (not a huge issue, but the email is massive). Now, as one of the columns is a 'reported by' containing username, any pages with said user on them now have a massive 'reported by' column...
I should also emphasise, the table width was 100% (minus a 'margin') prior to this issue, and it worked just fine).
Is there a clever way to introduce a line break on a '.' or an '#'? Alternatively, how do people normally get around this? Interesting solutions to this annoying problem are welcomed!
When you generate your html table content code, truncate every content extracted from your database to a maximum width. Your truncating function can easily add a tooltip giving the full label.
Alternatively, do this in javascript on pageload. Parse every table cell and truncate the content if it's too large. It's not as nice as server-side truncating, though.
The upside is that you can give the full label in a tooltip, append '...' to let the user know the label is truncated, etc.
Use the table-layout css property.
table-layout: fixed;
http://www.quirksmode.org/css/tables.html#tablelayout
You could set a max-width on the column and overflow:scroll or even overflow:hidden.
Related
I have a table, this table gets data from a server, and has a few fields,
The data from the server is plain text, but no limit on how many characters.
The table should not be over 900px wide.
View example
As you can see in my plunker some texts gets very long, so they take several rows, while some fit on the first row.
In my opinion, this is not readable at all, it's horrific.
And here's the real problem, since this should be printed some time, all text must be visible.
I have tried fooling around with some fixed tables and overflow: hidden properties, though this does make the table more attractive, a lot of text would be litterly unreadable
Basically what I am asking is if there are any tried methods for displaying (maybe) a lof of texts in tables, and have it readable?
Edit: Okey, as it seems this is the way to do it, there can be some stylig done, but nothing major. There's is one thing that bothers me though, and that's that the title field (field1) is pushed to the left so much.
I know I can set width, but that requires the table to be fixed, and that will cause problems, I need the table to be as dynamic as possible.
Is it possible to set priortiy on which cells the table will break words on first? So that maybe field 1 and 5 have a low priority, so those cells will be less likely to have line breaks?
The ideal solution, and the solution I have used in most of the projects i've done is to add a modal.
For example, if you have a pragraph of texts, the best thing to do it to display a few words and then add a View more button which will open up a modal which will display the entire paragraph.
You can also try to add a View button in the end of each row in another column. Clicking this would open a modal which shows all the data in that row entirely.
This way you can show some information in the table without making it ugly and also provide all the details in the table itself(although its not present in the table view).
It looks fine to me as well, although you may try alternating row colors... add the following rule to your css... you can of course change the color to whatever you like. I find it improves readability:
tbody tr:nth-child(odd) {
background: #eee;
}
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.
I have an HTML table that can be more than 1K rows and a dozen or so columns.
I want the columns to be a fixed size (controllable by the user) and not grow/shrink either vertically or horizontally. So visually the contents of a particular table cell will be on one line and the overflow gets cut off at the end of the cell.
Doing performance analysis in Chrome on a large table the main performance killer is overflow:hidden.
I've tried putting the contents of each cell inside of an input, since that would replicate the same visual behavior, but that has a similar performance impact.
What do people recommend to improve performance?
If necessary I don't have to use a table tag, but would prefer to stick with the table tag if good performance can be achieved.
Update 1: I've included a file that demonstrates the performance issue here. Warning the file is pretty massive (25MB) and will slow down your computer. By default the table does not have overflow set to hidden, and once the table has been loaded (can take a while) the browser performance relatively smoothly.
However, if you edit the file and uncomment lines 12-15 and then open it. You'll see after loading browser around the table is significantly less responsive.
FYI: I have run into this problem on the iPad/iOS causing performance problems with a page that has about a hundred rows in a table with table-layout:fixed.
As soon as a cell, or a div in a cell, gets an attribute that forces it the cell to be drawn individually, it takes about 300ms instead of 100ms to draw (which causes the UI to feel abysmally slow for my situation).
Either of two properties (position:relative or overflow:hidden) caused the problem for me, removing them optimised the speed but caused text overflow if cell text was too wide for the fixed width columns.
The slowdown was happening even after tables were drawn, because I am dynamically popping up an absolute div over the table. When profiling the javascript (using (new Date).getTime()), the slowdown in measured in places in the javascript that have nothing to do with the table.
[edit: added following as part solution]
Put all cell content inside a span element (so can measure offsetWidth of content rather than width of containing block element).
After appending the row into the document, test if each span.offsetWidth is greater than the column width, if so add the "overflow:hidden" to the style (or via a class) of the containing block.
Can skip 1 and 2 above for some columns (if it is known that the cell content will never need clipping).
Caveats:
Measurements only made for iOS5 Safari (I didn't profile any other browser).
Works for us because we dynamically create table rows (processing your example using javascript would be slow?).
Most cells for our data do not overflow (clipping is only required sparsely - only a limited number of cells).
Compromised initial page load (generation of table in page went from 80ms to 800ms).
But sped up dynamic combo popup (340ms down to 130ms) giving much better keyboard responsiveness.
For your situation, might be fast to first using variable width columns, measure offsetWidth of all columns, setting column widths to pixel widths and setting overflow:hidden only on columns where offsetWidth of column is greater than the pixel width you will be using for the column.
You could try using a tiled approach. It is a pretty typical approach to making things like infinitely side-scrollable games efficiently.
Put all of your data into a Javascript array, and then have N + 1 rows in a table that has N rows visible. When you scroll down, the last item would move into view. At the moment that you have scrolled far enough that the first item moves out of view, you shift all of the data up a row and reset the scroll position back to where it started. Done correctly, the shift would be completely transparent to the user. You would only ever be working with N + 1 rows in an N-rows-visible table.
I've done this before, but under very specific UI constraints. I kind of shutter at the thought of making this consistent using the built-in browser scrollbars and such.
first off, the amount of markup required to have a table is much larger than just using divs with clear:both css for a new row. so that's the first performance hit.
also, you are setting the overflow as a class ( ? )
<style type="text/css"> .ovfl { overflow:hidden; }</style>
<td class="ovfl"></td>
As an aside, 1000 rows is a weight to deliver.
With divs you at least have an easier opportunity to throw those out of sight ( beyond the scroll ) into a div with display:none until the visitor scrolls to them.
few skins to cat mostly likely on this job,
Hope had some good thoughts.
Webkit bug 75001 is related to this problem and it covers the work being done to solve it (also see bugzilla dependencies for information).
I'm new on this particular project, and I've been tasked with resolving an issue that's appearing in IE8.
If you check http://funds.ft.com/ETFHomepage.aspx, There's a section called "News". In that section, there's a column called "Most Popular ETFs". This should be the same width as the "Recently Viewed ETFs" column.
For reference, this page is appearing correctly in Firefox. Can somebody please point out what I can do with CSS or (some other means)* to resolve this?
*I know the best way to resolve this issue is to scrap the terrible design and implement it correctly!! :-) -- we're actually doing that right now. It's a big job, so it's taking a long time. In the mean time however, we have to fix the bugs as they appear. Thanks
Update: just to note what I've said to Hristo, "I think the problem is with the table (rather, nested tables) on the left. The table in the center has its width defined by the image, and the table on the right doesn't have an image so it gets crushed"
Well the reason this is happening is because of the url you have under the "Alphaville: Overcoming the Volcker rule, with ETFs" header. Since the url has no whitespace in it, the table tries to give it space. So there are a couple of ways to fix this problem:
Plain text urls aren't very becoming on a webpage (especially when they're not in anchor tags so you can click on them.) Could you update the content so that you don't have a raw url in your content?
If you must be able to handle long lines of text with no whitespace then you need to figure out how to change the layout of the page so it forces the text to either wrap or clip to fit the container. Try playing around with putting "table-layout: fixed" on your tables to force the column widths to be sized based on the table's specifications only (instead of content). Firefox seems to be wrapping on dashes and slashes in the url whereas IE only wants to wrap on the dashes in the url.
I would say your layout is fine, and you just need to fix the content generation so it doesn't include any long plain text urls (option 1 above)
EDIT: If you do decide to go with option 2 above, then look into the css rule "word-break: break-all". It is IE only and it forces the text to break as soon as it reaches the end of the container. Not good for words, but it works for url's. So you couldn't apply this to the whole news table, but you could to just the cell that contains the url.
I've got a table with a header, a row with input fields, rows with data. Like this. http://brow.hu/sitegen/stackoverflow_table_example.png
If somebody enters something into an input field I want to filter the data with an ajax query. After receiving the new table I change the content of the old one: div.innerHTML = req.responseText; and it blinks. How to avoid that?
One way to avoid flicker is called double-buffering. In Ajax, this can be done simply with 2 divs occupying the same space, one of them with the style 'display: none', the other 'display: inline'. Always write to the invisible one, and then swap display styles. If the divs have absolute positioning and size, there is absolutely no chance for flicker, and even if they don't, you can hardly do better.
It blinks because you're completely replacing the table ... if you add rows to or delete rows from the existing table and then load your AJAX data into the resulting table it won't blink.