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.
Related
I have four cells on one table and another table with about eight
cells.
I have set the max-width to 300px on all cells. Now the problem I face
is that the cells do not drop to a second row if the page is too
small. (Which is in every matter at the moment haha)
I was wondering how I would go about adding dynamic rows to make the extra content beyond the page width, drop below into a new row?
All the code can be seen in the Developers tools for the following website
(Cells/Rows in the products section is the problem I am facing.)
Kind regards,
Jesse M.
Ohh my sweet summer child,
The <table> element is "designed" to behave that way. The table will try to cramp up all the columns in the possible space and based on various css and html attributes, hide/overflow/cramp-up the data in columns, But never will it allow the columns of one row to flow down to another row.
So you are left with a lot of options using CSS and HTML elements.
If you are into frameworks, I recommend Bootstrap that is designed to work exactly that way, and use the provided col-xx-x classes for the elements that need to be in a row at some screen width, and "drop below into a new row" on other screen width.
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'm making a table with:
days as columns
times as rows
and the table data will be empty, styled anchors (changing between dots, lines and blocks).
When the display gets down to tablet/mobile size I want hide all but one of the days (columns).
As I understand it, as it is very obviously a table, I should probably use the table element. However hiding/styling tables/columns is problematic. I'd like to steer away from applying a column class to each td and I probably need to support ie8 so nth-child is out of the loop and col is too limited for the styling I need to do http://www.quirksmode.org/css/columns.html.
So my question is; should I pursue the applying classes to td's or what is the most semantic alternative?
Edit:
I think I've decided to go with nested ul's. I'm sure semantically it's not correct but in terms maintainability I think using tables would nigh on impossible
Think you are unlucky. Just add a class to all the td's in a column. This is the best backwards compatible solution there is.
Here you can read all about 'ways to hide first column' on Stack Overflow.
I'm working on constructing a table using only divs. I began creating the table using percentages to set column widths, but would prefer to just use table-cell and not have to worry about things that way. Only problem is I'm not guaranteed to have the same number of elements in every row.
http://jsfiddle.net/JWvLX/
This example shows what is currently happening in the top two rows, and what I want to happen if a cell is removed/not present in the bottom two rows.
What exactly do I need to do to accomplish this? Is this possible using only divs for tables or will I be forced to use actual tables to get the desired effect.
There's no equivalent for colspan/rowspan in CSS tables, but this Sitepoint post has some trickery you might be able to use.
I need some help with aligning two tables together, i.e: having the columns line up.
The first table has the headers, and the second table has the rows displayed. I'm doing this on ruby, so, I have to put the result in another table because the updating won't work otherwise(puts the data away from the parent table..) Is there a way, that I can have the two tables align, so the data for every row lines up with each header column.
Thank you
The easiest way would be to have fixed widths for the cells and make the widths be the same for both tables. Also make sure that you have the table properites be the same (i.e. the cellpadding, cellspacing and table widths )
can't you just remove the closing tag for the header and remove the opening tag for the content?
It’s not a great idea, HTML-wise. Heading cells and data cells should really be in the same table. Then you get the alignment for free.
“ I'm doing this on ruby, so, I have to put the result in another table because the updating won't work otherwise”
Are you entirely sure there’s no way for Ruby to update an HTML table that has header cells? Really?