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.
Related
I have been trying to understand this excerpt from CSS 2.2 specification for a while with no success (the bold selection is mine):
UAs must compute an initial left and right border width for the table by
examining the first and last cells in the first row of the table. The left border width of the table is half of the first cell's collapsed left border, and the
right border width of the table is half of the last cell's collapsed right
border. If subsequent rows have larger collapsed left and right borders,
then any excess spills into the margin area of the table.
The top border width of the table is computed by examining all cells who
collapse their top borders with the top border of the table. The top border
width of the table is equal to half of the maximum collapsed top border.
And this is how borders, collapsing etc. are implemented in Chrome (FF and IE > 7 are the same):
table {
border: 6px solid green;
border-spacing: 0;
border-collapse: collapse;
}
#cell_1_1 {
border: 28px solid red;
}
#cell_2_1 {
border: 12px solid chartreuse;
}
#cell_2_2 {
border: 2px solid cyan;
}
While I was expecting something like this:
I was expecting the left border of the table to be 14 px thick. Because the collapsed left border of the first cell #cell_1_1 is 28px wide (The left border width of the table is half of the first cell's collapsed left border) and on the left the border is split between the cell and the table. So visually the table has 28 px border near the first cell, but 14 px belong to the border of the first cell. And then the border stays the same for all the left side of the table. If some cell's borders a wider then they are protruding to the left, without affecting the left border of the table.
The same thing with the top border.
Also I thought the problem can be related to the initial word in the excerpt, that is these rules apply only in case a table has no specified border, but it turned out to be not related (the removal of the border style rule for the table simply removed the green border at all).
So could anyone answer to the next questions:
whether the implementations of this collapsing borders model in Chrome, FF, IE are correct?
if they are correct, what is wrong with my understanding of the specification?
Now, if we went vice versa and assumed the implementation in Chrome as a starting point to derive the specification, this part should have been something like the next (I have kept only the part relevant to the left border for succinctness):
UAs must compute an initial left and right border width for the table which is then used to position the table relatively to its containing block by
examining the first and last cells in the first row of the table. The left border width of the table is half of the first cell's collapsed left border after all border conflicts if any have been resolved
...
If subsequent rows have larger collapsed left and right borders,
then any excess spills into the margin area of the table.
...
Any borders that spill into the margin are taken into account when
determining if the table overflows some ancestor (see 'overflow'), but do not affect the position of the table relatively to its containing block
Then the excerpt would have made sense.
Here there is a table with the border wider than the first cell's one inside a containing block with the pink background (as we can see, the border of the table is chosen over the border of the first cell because it is wider and then this border is used to position the table inside the container. The wider borders of the subsequent cells are protruding beyond the table's border):
And here there is the same table with the border of the first cell wider than the table's one, that is chosen over it during the border conflict resolution. And here this border is used to position the table relatively to the container:
The answer is "no." I love the frankness of the discussions had by the CSSWG, and the notes on the current draft of the CSS Tables 3 editors' draft tell you all you need to know about this question.
Since browsers
handle this so differently, convergence cannot happen without
reimplementation. …
… some combinations are not well-posed problems, so no
rendering algorithm could be optimal.
Because they grew from something simple (HTML) to something very
complex (HTML+CSS), the current table rendering models…used by web browsers are insane (in the sense they are
buggy, not interoperable and not CSSish at all). Many usual CSS
assumptions are broken, and renderings diverge widely.
(Emphasis added.)
There's much more information in the current draft, but the CSS Working Group acknowledges (1) that browser implementations are inconsistent, and (2) even their own current proposal is insufficient.
I'm trying to make a basic A4 document in HTML using mm CSS sizing. The document is sized perfectly - it prints fine on A4, covering virtually the full page, leaving a nice 3mm margin around it. I'm using a table for the layout, as the original document (that i'm re-creating in HTML) was created in Excel, and therefore has a table structure.
As I need the table to have an exact 3mm margin, i'm setting the width and height in mm, and using absolute positioning (3mm top and left). I had originally created the table-like layout using divs - but making the lines overlap perfectly using this is extremely fiddly - you can't really do it properly, as you're working with a mixture of millimetres and pixels, hence my choice for using a table.
The table displays perfectly, all rows uniformly fill the document. Some of the rows need to be split, so I chose to use floated divs within the s, within the s.
Despite resetting the CSS, and setting the <tr>s padding to 0, and the <td>s padding to 0, and giving the table border-collapse: collapse; and border-spacing: 0;, there's an annoying little margin between the div, that even Chrome can't explain why it's there:
https://www.dropbox.com/s/qt1n54m9fxxl6f2/job_sheet_template.html
You may need to open the image link, and zoom in, to see the green highlighted space below the divs (which is apparently the <td>s padding). In the bottom, right hand corner, you can see that the padding isnt set?
Why is this here?
Your image shows that border collapse isn't being applied. Try using:
table {
border-collapse: collapse !important;
}
I've fixed the problem -
The padding isn't set, but somehow setting the divs height to 100% doesn't work - I've now set it to 5.4mm which fits perfectly.
for html
html
{
font-size:0;
}
I am on IE9+ and Firefox/Chrome latest.
http://codepen.io/helloworld/pen/wmuGH
How can I put a margin between all columns that the table looks like a diagram?
I do not want to use an empty dummy column between the real ones and set their width to fake the margin.
I have played a lot with padding and margin but either the rounded border at top is broken or the background-color of the diagram columns are floating into the new created gap between the columns...
UPDATE:
There should be no gap between the rows.
Just like this:
Try this:
#responseTable {
border-collapse:separate;
border-spacing: 4px;
}
http://jsfiddle.net/qLumE/
I am trying to recreate a "pixelated" version of Space Invaders in HTML/CSS using individual 30px squares with a 2px border.
Thanks to Sunyatasattva, this is what I have so far:
http://jsfiddle.net/wnhzp/
However, notice that only the "inner" squares have the correct 2px black border all around them, and that any side of an "outer" square that is not facing an adjacent square only has a 1px border.
How can I get every square to have the proper 2px border?
Add margin:1px to your div styling.
UPDATE: Oh, I see what you want. Here you go: jsfiddle.net/nunzabar/Wna8L/
I had to manually set each border. The invader looks awesome now.
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?