I am having problems putting a box-shadow on trs inside a table. The problem is that the box-shadow doesn't show up at all unless the display of all the trs of the table is set to block (a 'fix' I found here: Box Shadow inside TR tag). However, when the display of trs is set to block, it makes the table cells no longer line up, crowding all to the left.
Here's a fiddle demonstrating the problem: http://jsfiddle.net/jFdEY/
You can try changing it to apply to all trs but that causes another problem (in the second picture below).
Here's some pictures:
The one without display: block on all the trs (table displays properly but box-shadow doesn't work)
The one with display: block on all the trs (box-shadow shows up but the table layout is broken)
So, is there a way around this?
"Many of the elements used within tables are neither block nor inline elements."
For this reason setting all TR to block is most likely breaking the natural table behavior.
EDIT: I was able to create a solution similar to your desired effect however it requires that the columns have fixed width.
Demo: http://jsfiddle.net/jFdEY/2/
Technically this isn't a table anymore though, just appears as such.
Related
I'm trying to create a flexible table layout in which there is one column that does not flex at all. It has just enough room to accommodate a button for an actions dropdown. The remaining rows should consume the following space entirely and truncate if need be.
https://codesandbox.io/s/awesome-galois-i70rr?file=/src/App.js
I'm running in a React app, but I'm working with native table elements. While my truncation certainly seems to work, at a certain width there appears to be a breakpoint at which it simply stops truncating and the table overflows the body instead. In theory this should never happen unless the width of the browser is less than the 48px allocated for the button, which of course is never. The other columns should continue to truncate instead of stopping at some random breakpoint. Furthermore, the remaining columns don't flex proportionally to their content. Any ideas on how to fix these two issues?
This is what happens when you combine table layout with block/flex layout. If you are going to commit display: flex on your table rows, you need to extend the non-table layout method to table and tbody as well.
Changing table and tbody to display: block will fix the problem in your CodeSandbox.
I would also change thead to block display as well, as a best practice and for consistency, even though you won't see any issues with it in your current example since the longest cell of each column is in the tbody instead of the thead. If one of the columns had a column header that was longer than any of the cells in the body below it, you would run into a similar issue if you don't also set thead to block display.
I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom.
Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed.
I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular divs with their widths set to 100%.
Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid error in my attempts that's screwing up the layout?
Since you're using CSS for layout (this is not tabular data) then there's no reason to use display:table-caption for the footer. Just make a regular div whose width is set to the same as the table (or fills a container that shrink-wraps the table).
Edit: Here's an updated example: http://jsfiddle.net/fCTpR/1/
Though I had found the workaround for my problem, I still would like to clarify some things.
Here's what I wanted to achieve: a table with an image as separator between rows using generated content
Here was my first effort: http://jsfiddle.net/5Vqqf/68/
As you can see, the generated content in the table cells (td) doesn't seem to render anything. I expected a red line underneath each rows.
Second effort: http://jsfiddle.net/5Vqqf/69/
I insert some content to the content property, ie. content:".";
This seems to do the trick in generating the content. However, Firefox, unfortunately, doesn't render it right, in that the content is in relation to the whole page. (Notice the red line at the bottom in FF?)
Third effort: .../70/ (Same link but change the last number to 70 - Sorry, I don't have the privilege to post more than 2 links yet)
Giving the cells a float seem to fix Firefox's problem. However, the heights became inconsistent.
Last effort: .../72/
Finally, I resort to applying the content into the table rows (tr) instead. And this did the trick for all major browsers (excluding IE7, of course).
Okay, so here are my questions:
Why can't this work with an empty content like most elements do?
Why does Firefox render it in relation to the whole page (see second effort)? Is it a bug on FF side?
Is it a bad practice applying content into the table rows (tr)?
(Note: this question is regardless of the possibility of using background image directly on the cells themselves or using borders)
I have problem in which I have some rows which I want there to be a uniform background color but not all rows have a equal number of td elements so there are some which are longer then others and the shorter ones thusly end up with empty space. This is ok except the empty space, even when CSS style background-color is applied to the tr element, has no background. How can I apply background to an entire table row, including empty space?
You're not doing it right if you're not accounting for a uniform number of columns across each row. Either make use of colspan or add the appropriate cells.
Put the td element in there and you'll be fine. Is there a reason you need to leave it out?
I'm overlaying two tables and need to show only certain cells of the table which is on top. So I set visibility to hidden for the entire table and set visibility to visible for the cells I want to see.
It works fine except that the cells which are visible do not have borders. The borders exist in CSS but since the DIV in which the table resides is invisible the borders are invisible too. Is there any way I get around this?
The target browser is IE8.
If I set the mode to compatibility then all the borders turn up - even the ones for the invisible cells!
Thank you.
You might try wrapping the content of the table cells you want to be visible in a div and set the div to have the border you want:
<table>
<tr><td><div class="borderedClass">
//Content here</div></td>//other cells here</tr></table>