Fiddle
<table>
<tr style="border:1px solid black"><td>hi</td></tr>
</table>
In FF7 I can see the border. In IE7 I see no border. How can I display the border for the row? I would like to avoid having to add borders at the td level due to the complexity this adds determining column index for border placement.
It appears that IE7 is super buggy (as apposed to IE6 which is uber-super buggy).
Here is a fiddle that demonstrates a possible workaround (top and bottom borders on the TD elements).
Its not possible to go directly to TR. Unfortunetly, even though you specified in the question that you would like to avoid td, the workaround is to use a td.
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
It's already been confirmed that it's not possible to add a box-shadow to a display:table-row element in a way that's compatible with all the major browsers. For reasons that boggle my mind, a row cannot be styled as a group, which means you can't add a box-shadow to an entire row in a display:table and can only add it to the individual display:table-cell elements, which then creates vertical shadowing in-between cells which I don't want.
So how can I mimic a table whereby the width of the first pseudo-column of all the pseudo-rows of the pseudo-table are the same width as its longest element, and the second column is whatever width is left while adding box-shadow to the pseudo-row?
Right now I'm using white-space: nowrap and width: 1px on the first display:table-cell element of each display:table-row to ensure the left-most column of all rows are the width of the longest text in that column regardless of the width of the screen.
See example here: https://jsfiddle.net/yupwh6uq/
That works great in terms of formatting the display:table and the columns, but it doesn't allow me to add box-shadow to the display:table-row elements.
So how can I get the auto-column-width-adjusting table effect that I have now to display the info, but with the box-shadow on each pseudo-row in a way that's compatible with all major browsers using pure HTML/CSS?
P.S. I want to avoid using display:flex; as it will break the formatting on older browsers.
This can help
but it calculates with fix height of a row and need span in td (but it could not be a problem in the table)
http://codepen.io/michalkliment/pen/dWzwEG
(tested in safari (ipad/mac) / chrome / IE10 / firefox)
<table>
<tr>
<td><span>Celll 1111</span></td>
<td><span>Celll 222</span></td>
</tr>
<tr>
<td><span>Cellll 33</span></td>
<td><span>Cell 4</span></td>
</tr>
</table>
I'm working on a sort of an ad replacer script. Sometimes advertisements appear inside of tags like this:
<tr>
<td align="right" width="40%"><a><img src="ad.jpg"></a></td>
<td>123</td>
</tr>
The kicker is that I can't change the display values of the ad; for the purposes of this exercise I have to overlay it with an opaque div which needs to be absolutely positioned as well as inherit margins and floats and that sort of thing.
When an ad is found inside of a div and happens to be floated left or right, positioning a div over it with the appropriate left:0; or right:0; css attributes is pretty easy. However when the ad is styled by a td, it appears that Firefox doesn't render it quite right, even if the td is appended a position:relative; style.
Here's what it looks like in Chrome\IE:
(the grey cell is the first td, the red is the overlay, the inner borderless cell is an iframe that is to be overlayed - you can't see it very well because it's being overlayed :) )
Here's what it looks like in Firefox:
The code for the overlay is really simple...
<div style="right:0;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;position:absolute;z-index:9999;background:red;width:300px;height:280px;"></div>
... and it's being prepended to the td in question.
The right:0; property is making it shoot all the way out from inside the td even though it's been ordered to be relatively positioned.
What am I missing here?
You can add a position:relative wrapper div, like in the following fiddle: http://jsfiddle.net/qfquj/
You could also possibly set the image as a background-image instead of using an img tag... allowing you to add a div inside of there with a transparency or whatever you want.
such problem with firefox.
<td height="10" style="border:1px solid #990000;"> </td>
gives red line border, but I need height 10, with it doens't stand height 10, without it firefox doesn't show the red line.
anyone one a way?
Make sure your table does not have the CSS empty-cells:hide; applied to it. You can apply the direct opposite value inline (opposite is show), but this is the default value so unless you're setting it to hide in some page-level CSS, this should not even be necessary.
Another CSS item that can affect empty table cells is border-collapse. Ensure that you are not setting it to collapse. The default is separate, again you can either ensure that no page-level CSS changes this style, or you can explicitly add it to the table inline.
<table style="empty-cells:show; border-collapse:separate;">
<tbody>
<tr>
<td style="height:10px; border:1px solid #990000;"></td>
</tr>
</tbody>
</table>
http://jsfiddle.net/yHrhu/
In fact, using the non-breaking space ( ) may cause the cell to be larger than the specified 10px, since the space will be of the same font size as any text in the element. If you are using any font size that is larger than 10px, the cell would be bigger than intended.
additional to Chris's answer.
Make sure your TD's does not have position:relative applied.
Just stumble around this problem myself today turnout set the background into none or transparent make the border visible again.
table.table tr{
background: transparent;
}
I have an HTML table of tickets listings (e.g. http://seatgeek.com/event/show/23634/buffalo-bills-vs-tennessee-titans/). I'd like to highlight certain rows with a 2px border. The problem is that this is bleeding into adjacent cells and covering up other borders.
For example, I have a 1px bottom border on the first row of cells (to designate that it's a header). If I try applying a 2px border to the second row, then it covers up border in the first.
My first reaction was to set a margin for the troublesome, but I've been hunting around for a solution, and it looks like that's not possible. Is there another solution?
It sure looks like its the border collapse that is the problem here. If you remove the
table {
border-collapse:collapse;
}
you will get what you're looking for.
You might be having box model crossover. http://www.w3.org/TR/CSS2/box.html
for every px or border added you will need to remove equivalent padding or width. if 1px to left and right then 2px from width.
If this is not he case you may need to add margin to the tr.