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>
Related
I have a table with a header, and I'm trying to place a div next to it such that it appears to be an extension of the table header. This works fine in Firefox: (the X is in a div separate from the thead)
But in Chrome the border is offset by one pixel:
When I inspect the elements in Chrome, both the thead and the div are the same height, so it's strange that their borders would end up in different places. If I add a 1px margin to the top of the div, the border lines up but it creates a one pixel tall gap at the top.
Here's a codesandbox that shows what I'm dealing with. This example is using TailwindCSS.
https://codesandbox.io/s/quirky-hooks-gf6cx View it in Firefox and Chrome to see the difference.
Thanks for your help.
Chrome calculate the height of table with 1px more, it seems a bug.
To fix you can add the display block to tr
https://codesandbox.io/s/modest-tu-muw2m
EDIT:
You can create a div inside a th element to avoid bug:
https://codesandbox.io/s/reverent-microservice-ltz40
I have no control over the html in this project, so I need a css only solution unfortunately. The html is horrible, and it this wouldn't even be a problem if I could edit it. I have made a fiddle of where I am at at the moment.
I have a fixed width div, with a fixed width table inside it. They are the same width (500px in example) The table has an unset number of rows, generated in asp. I have floated the rows left so they appear in line (I know this is awful, but it was all I could do without editing the html) Each td is 100px. The heights and background colours added in the css are just to make it a bit clearer, they can be changed to whatever.
What I want to achieve is to get the td to start at the right hand side instead of the left. I have tried floating right instead of left, but this makes the links appear in reverse order which is undesirable.
The only solution I can come up with is to change the table width in css and float it to the right, which would be fine if the number of rows was a constant, but there could be some added to it or removed, which would leave it looking incorrect again.
fiddle link
I think you were correct with your thought to change the table width in css and float it to the right. I think I get what you want if I set the table width to 0px (it will expand to contain the tr's) in CSS, and float the table to the right.
Edit: nevermind. I was using Chrome and it worked there, but not in IE
Edit2: width:auto seems to make it work in IE, Chrome, and Firefox
I you have fixed width tds in your table, they should add up to 500px. In this case they add up to 400px. So you have to prepend one tr with auto width to your table.
Update: Hmm, this does not work since you have floating trs instead of tds
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 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.
I have a <td> that is just about empty since it only contains an . The height I'm trying to enforce is 110 pixels, but for some reason the table cell is rendered with a height of 182.317 pixels. Why?
There are a few things I already checked:
The font-size that applies to the non-breaking space isn't set to something that cannot fit into the table cell.
There's no table cell on the same row that needs to stretch in order to fit its content into that cell.
There's no piece of CSS code that overwrites the height I want with the inexplicable value of 182.317 pixels.
What else could be the culprit? The cell renders with the expected height in Chrome, but it messes up in Firefox 3.6. The rendering mode is XHTML 1.0 Strict (yes, I did validate).
Update: you can view and analyze the page at http://labs.pieterdedecker.be/vspwpg/. The <td> I'm talking about is leftbartop.
Use Firebug and take a look at the cell via the element inspector. On the bottom right using Firebug, look at the style. Scroll down until you see an area where you are setting the height of the cell. If you still can't find it, try right click in the style area and adding it in the top most style selector.
Eventually you'll either find the culprit that is overwriting your styling, or you'll be able to find a class that you can use to overwrite the style that is being applied. You can also use Google Chrome's developer tools to do the same (just right click anywhere on the page and "inspect element" to bring them up).
You don't say which of the columns in the table has the issue. But, I suspect that it is:
<td id="bottombar2" colspan="2"></td>
The attribute colspan="2" tells the cell to be two rows high. Your rows are 95px, that would make it 190px high (roughly the height you are seeing).
Each row in your table specifies a different number of columns 5, 1 and 3. This might explain why the table is rendered differently by different browsers.
Do you have a line-height set for the table cells or somewhere in the cascade that affects it directly?
does it work if you say
{height:95px !important;}
Perhaps you have set padding or something like that that is affecting the td