I have this piece of HTML that I want to style.
The html is a table (and actual table), which I want to give a border.
The element also had a :before pseudo-element, which I use to put a small triangle in the top corner.
The JSFiddle is here.
I hope it makes sense. I stripped down the markup and the CSS as much as possible, because it's actually a small part of a big site.
http://jsfiddle.net/GolezTrol/28yDb/2/
Now the problem is that the combination of having 2 columns, having border-collapse: collapse; on the table and the :before pseudo element, cause the top border of the element to partially disappear. It's only there for the length of the first column.
You would assume that it is the pseudo element that is on top of the border, but this element is very small, and as far as I can tell, this could not be the problem. I added visibility: hidden; to the pseudo element to be sure, and I can tell that the triangle is gone, but the border is still incomplete.
Unfortunately I cannot change the markup, since this is outputted by MediaWiki, but I do have full control over the CSS.
The HTML:
<div id="globalWrapper">
<div id="column-content">
<div class="thumb tright">
<table class="infobox vcard" style="">
<tbody>
<tr>
<th colspan="2" class="fn org" style=""> Example text</th>
</tr>
<tr>
<th>Row head</th>
<td>Content</td>
</tr>
The CSS:
/* Generic table styling */
table {
border-collapse: collapse;
/*border-spacing: 0;*/ }
/* The box */
.thumb.tright table.infobox.vcard {
border: 3px solid #fae104;
position: relative;
}
/* Triangle */
.thumb.tright table.infobox.vcard:before {
content: "";
position: absolute;
width: 0;
height: 1px;
border-top: 5px solid transparent;
top: -7px;
border-left: 10px solid #555;
visibility: hidden;
right: -1px; }
I already found out that it works when I remove border-collapse: collapse;, but I'm not sure that is a proper solution, and even if it is, I would really like an explanation of what is going on.
Btw. I got this problem both in Chrome 29 and in Internet Explorer 10. Haven't tested other browsers.
Update
Instead of using -or not using- 'border-collapse' to fix the problem, I found out that this also works:
.thumb.tright table.infobox.vcard tbody {
display: block;
}
So the table itself is still a table, the pseudo element is still on the table, as is the border, positioning etc. The tbody, which was unstyled before, is now a block and the problem is solved in both browsers. I found this by trial and error, and still wouldn't know the reason behind it.
Updated fiddle: http://jsfiddle.net/GolezTrol/28yDb/9/
Being a newbie to StackOverflow and jsFiddle I updated the Fiddle with that I think is the solution. I didn't change the CSS except for moving the pseudo class from the table itself to the table header, and changing it into :after. Works for me in Firefox and Chrome!
/* Triangle */
.thumb.tright table.infobox.vcard th:after { }
Border-collapse: seperate is not supported in IE8 but I think this will be.
edit: nevermind ;)
It is a problem only occur on Webkit browsers I think. It can be considered a "browser bug" imo.
th should be inside thead, not tbody:
<thead>
<tr>
<th colspan="2" class="fn org" style=""> Example text</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row head</th>
<td>Content</td>
</tr>
<tbody>
And I think this is the correct solution. You are putting an element where it is not advised to be, so it should be normal for a problem to occur.
Edit: as thirtydot pointed out, changing the th to td doesn't change the result. It only work when I moved the th to the thead section. At this point I am at a loss, I can't find a way to solve this.
But at least I think I can provide my speculation on the cause of this problem:
:before create a pseudo element inside the target element. What kind of element is unknown to me, but I suspect that the browser create a td. If that is true, then after rendering your html should look like this:
<table>
<td></td> /*the pseudo element*/
<tbody>
<tr>
<th colspan="2" class="fn org" style=""> Example text</th>
</tr>
<tr>
<th>Row head</th>
<td>Content</td>
</tr>
<tbody>
</table>
Needless to say this look weird. And if you try the above html out you can see the result is similar to your problem. border-collapse:collapse will merge 2 borders together where there are 2 cells next to each other, or a cell is next to the table's border. So I suspect in this case, the pseudo element - which doesn't have appropriate colspan - last only 1 column, the rest of that row is empty: nothing's there. This is where I think caused the bug: because there's no cells next to the table border there, no border is created at all.
The real reason may be a little bit more complicated ("why doesn't the bug occur when I put in a thead?"), but I think my answer is not too far off the mark. :)
The only reasonable explanation I can think of is pseudo-element :before not being compatible with the display: table of the table in collapsed mode. That is why border-collapse: separate; solves the problem. Suddenly, the browser can display the top border not caring about the pseudo element.
If you look closely, you can clearly see that the missing part of the border is the width of the second column. If you change it to after pseudo element, the border is missing in the bottom-right corner, again due to the fact that the borders of the table and the pseudo-element are collapsed.
If you change the border-bottom of th to be 3px solid red in collapsed mode, the th overpowers the table and the border is red. I presume, the power of after and before follow the same rule. It would be nice if someone who knows the specs better came to answer that.
Thinking this way, I do not believe there can be any other solution than:
using separate borders
putting the pseudo element on the parent div
What I inspected is that the pseudo element is actually rendered as block and can be change to table and list-item. However, none of these change the behaviour.
Very random stuff that is actually compliant with Av Avt's answer about where the pseudo element is rendered in regards of the DOM.
If I append the :beofre like this, the border stays:
.thumb.tright table.infobox.vcard tr:before
Obviously, it creates as many new pseudo element as there are rows.
Related
I've got a pretty regular HTML <table> with one cell that spans multiple rows via rowspan. Inside of this cell I've got a <div> that I want to occupy the entire height of the cell but for the life of me I can't seem to figure it out. It seems similar to this post which mentions this Chrome bug but also seems so simple that maybe I'm just not thinking clearly.
Here's a stripped down version of my HTML:
<table>
<tr>
<td class="a" rowspan="2"><div>A</div></td>
<td class="b"><div>B</div></td>
</tr>
<tr>
<td class="c"><div>C</div></td>
</tr>
</table>
And CSS:
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;
}
And a JSFiddle. And here's what I'm getting and what I'm trying to get:
What's really weird is if I use Chrome's inspector to change the <div> to display: inline-block and then set it back to display: block it actually looks pretty much exactly how I want it to.
(And no, switching away from a table isn't an option for this project, there's other code not shown that requires that.)
Option 1
Simply add overflow:auto; to your div CSS
Demo Fiddle
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;overflow:auto;
}
Option 2
Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.
Option 3
The only other way would be to set position:relative on the td elements then position:absolute for the child div
So I have 2 td side by side in a table. The first td has a border, the second doesn't but the element inside has one and I need both border to line up (top and bottom)
So is there a way to have the element go "over" the border space since it's not there? If I try to grow the element inside the td, the td grows and keep a 1px border spacing even if it's not there.
Rough html:
<table><tr>
<td class="border">1</td><td class="noborder"><span class="border">Text</span></td>
</tr></table>
See this fiddle for a better picture :)
http://jsfiddle.net/LcGks/1/
Any idea?
I think what you want to do will make the content height of td different for first and second td. In table all element in a row have same height so i think you should not use table for this.
Otherwise the workaround i can think for this is to apply top and bottom border for td.noborder which will make both td's line up.
like this
td.noborder {
border: solid blue;
border-width: 1px 0px;
padding: 0px;
}
see here http://jsfiddle.net/LcGks/1/
Since you can't use box-sizing on table elements, I don't really see an easy way out. I think the best way would be to use a div inside the table cell to display the border.
http://css-tricks.com/box-sizing/
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I usually do this using the cellspacing attribute of the table.
<table cellspacing="2px" border="1px">
<tr>
<td class="border">1</td><td class="noborder"><span class="border">Text</span></td>
</tr>
</table>
see example: here and see Code
I have a web app that uses bootstrap to make it mobile friendly.
In an attempt to visually group 3 items together, I have created a class the puts a box / border around the table cell where these three items appear. (the three items are link4, 5 and 5)
Here's the class:
td.lights
{
border: 2px solid black;
}
And here's the problematic HTML - I've paired it down to the minimum code, just for demo purposes.
What I'm noticing is that when I simulate a mobile device (using Firefox's Responsive design view tool) the bottom of the
<table>
<tbody>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td> </td>
<td class="lights">link4 / link5 / link6</td>
</p>
</tbody>
</table>
Immediately after this table, I have this code to create another table:
<P>
<table class="table table-bordered table-striped">
<thead>
etc...
</thead>
</table>
When i resize my browser, the border on the bottom of my in table 1 gets cut off, depending on how small by browser size gets. The other fields look fine, but then again, they don't have a border around them. To me, it looks like there's a fixed set of space above and below my text ("link4 / link5 / link6") that is not dynamically changing.
I've tried adding a height "dynamic" height property to my td like so:
td.lights
{
border: 2px solid black;
height: 1em;
}
But that didn't resolve my problem.
Any suggestions? Please and thanks!
As far as I can tell you have quite a few errors in your markup:
</p>
Should be:
</tr>
Also, should you have a:
<P>
Before your second table? I would avoid wrapping your tables with P tags as this will add unwanted padding and doesn't make sense from a semantic perspective.
Fix those first and see what happens. Secondly I would recommend - when dealing with tables - to use the following:
<table cellpadding="0" cellspacing="0" border="0">
You can also do this in CSS with the following:
table, tr, td { margin: 0; padding: 0; border: 0; }
This should make sure you have no unwanted padding in and around your cells.
As it turns out I don't know CSS.
I ran into a brick wall after using Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/)
I have a table with this style
table.home_right_top, .home_right_top table, .home_right_top
{
background-color: #F2F2F2;
width: 100%;
padding: 10px 20px 15px 20px;
}
but the padding is not applied to the table at all and I cannot figure out why. I am happy that I see the same behavior on all the browsers including IE7 and IE8 but I don't see any padding. Can someone please tell me what I am doing wrong here?
Thanks.
EDIT
This is my table
<table class="home_right_top" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="blueHeading14 heading_padding_right" style="width: 64px">Products</td>
<td class="rpt_stroke" style="width: 280px"> </td>
</tr>
</tbody>
</table>
The problem isn't the reset, it's that the W3 CSS property spec states that padding can be applied to:
all elements except table-row-group,
table-header-group,
table-footer-group, table-row,
table-column-group and table-column
So it's invalid to apply padding to a <table>. Instead, the only solution that comes to mind is to apply margin instead, wrap the table in a <div>, or apply the padding to the individual <td>s with special classes.
Take a look at the last line in his css:
table {
border-collapse: collapse;
border-spacing: 0;
}
Try removing that and seeing what happens, table cells don't often act like block level elements. I think the real problem here is that you shouldn't style the table element like this, becasue it's display property by default is table which is not the same as the box model.
Try putting padding on the cells themselves or add a margin to the table.
Works fine for me. Did you declare a DocType?
You have to apply the style to the TD's not the table.
table.home_right_top td
In my css file, I have a reset where I am setting the border:0. This causes all tables in IE, not firefox to have no border. Even if I set the border inline on the table, it still does not show in IE. Does anyone know the solution to this?
Part of the rest:
table, img
{
border:0;
}
<table border="1">
<tr>
<td></td>
</tr>
</table>
Border shows up in firefox, but not in IE. Do I have to do style="border:1px solid black" in the table instead of border="1"
If you want that specific table to have a border, I would just give it a class:
table, img
{
border:0;
}
table.something
{
border: solid 1px #000000;
}
<table class="something">
<tr>
<td></td>
</tr>
</table>
That should work in all browsers.
If you want a border you shouldn't set the border to 0. Try this instead:
table{
border: 2px;
}
That should work out better.
EDIT:
If you want to do it inline, you should do
<table border="2px">
Assuming that there's no typo in your code (in the question), have you tried adding a measurement unit to the inline setting?
<table border="1px">
For example?
Elsewise, try using CSS to re-/activate the borders:
<table style="border: 1px solid #000;"> <!-- or use a stylesheet, or style block, obviously -->
Have you checked that you're using a standards-compliant doctype declaration, and not lapsing into quirks-mode?
A couple standards-compliant ways to specify no border in css are:
border-width:0;
border-style:none;
Table elements, td elements and th elements all accept borders so a safe way to ensure no borders at all would be table, td, th {border-style:none;}.
table {border-collapse:collapse;} is a purely css way of removing spacing between cells
Check out w3schools.com or w3.org for standards-compliant css tips
Your example table has nothing in it. IE decides it has no content and so does not show the "border="1" attribute.
Reset with
table {
border:none;
}
Then use:
<table style="border:solid 1px #000;>
<tr><td>x</td></tr>
</table>
have you tried
table {border-collapse: collapse;}
EDIT: wait, you're trying to get rid of the border or add it? Now I'm confused...