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;
}
Related
I am trying to create a Table that shall contain some columns with basic facts on the left and on the right side there shall be some columns that can be tabbed. Something like this:
So the Question is, how to do this?
I could personaly think of two solutions, but I actually don't like both:
Write a own Table for Tab1,Tab2 ... That contains the basic data and the Tabbed Data
Write a Table for the basic Data and one for each Tab. Here I think you would have a lot of Design problem "glueing" both tables together, so they look like one table.
So actually I don't like both solutions. Maybe there is a better solution to this?
Perhaps you could give the columns that belong to each tab their own unique class, e.g. .tab1-columns, .tab2-columns, etc. Then, you could show or hide the column depending on the active tab. The tabs, however, would exist outside of the table. Alternatively, you could pt the tabs into a pseudo- header row above the actual table header row, with the first header cell spanning those cells that shouldn't be "tabbed". However, I believe leaving the tabs outside of the table would be a bit more semantic in nature.
HTH.
Render all columns but hide them (display: none;) except the column by default.
Then add an click event on the tabs to switch the visible columns. be sure to use just the nav-tabs and not the js component.. it will be easier I think
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 a table with column contents that could be potentially long. From a design/usability standpoint, is it better to wrap the text or provide a scroll bar within the column to view the entire text?
Personally, I think wrapping the text is better. But I wanted to know what have others done in such a situation?
I ALWAYS page my content rather than wrapping or scrolling. It's super easy with jQuery DataTables and it gives the user further opportunities to filter, limit, and sort the data.
This solution also gives you the option to scroll data as well, and to dynamically adjust columns or do show/hides. But I've never gotten to that point. One one of my applications, using Ajax and Pipelining (which are supported by the plugin) it handles 3+ million records without a hiccup. Also, note that it can use jQuery's Themeroller, which can style the table simply and even from the user end on the fly if so desired.
I usually let the text wrap into the cell. But, what do you mean by "potentially long"?
I use a calendar plugin and sometimes the title gets long- i made the decision to break the string in the middle if needed- Supported in CSS3 only- other wise it just wraps
My css
.fc-event-title {
text-wrap: unrestricted;
word-wrap: break-word;
}
and will only happen if mywordisexteremlylong and wont fit properly in a small cell
But this is very extreme so that it does not overflow into the next cell.
But otherwise i dont break the word if there is enough space.
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 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.