How to Fix Inconsistent Rendering of Adjacent Td Borders When They Are Collapsed

How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

I came to this solution without extra-markup : http://jsfiddle.net/fcalderan/PAJzK/12/

the idea is to avoid using border-collapse and using border top/right for table cells and border bottom-left for table element.

tried with IE8, FX11 and CH17, here's the relevant CSS

table {  
    border-spacing : 0;
    border-left    : 3px black solid;
    border-bottom  : 3px black solid;
}

td { 
    padding      : 5px; 
    border-right : 3px black solid; 
    border-top   : 3px black solid;
}

#foo td { border-color:red; }

/* border left red-coloured using :before pseudoelement */
#foo td:first-child:before { 
    content       : ""; 
    position      : relative;
    margin-left   : -8px;
    padding       : 8px 0 8px 5px;
    border-left   : 3px red solid;
}

/* top border of next rows red coloured */
#foo + tr td {  
    border-top: 3px red solid;  
}

here an issue occurs if the highlighted row is the last one: in that case #foo + tr td wouldn't match anything : in that case you could write instead this rule

#foo td:after {
   content    : "";
   position   : relative;
   margin     : 0 0 0 -8px;
   display    : block;
   width      : 100%;
   height     : 3px; 
   padding    : 0 8px;
   top        : 2px;
   margin-bottom : -6px;
   border-bottom : 3px red solid;
}

see example in http://jsfiddle.net/fcalderan/PAJzK/14/

CSS border-collapse doesn't work fully in Chrome with display:flex inside a td?

Using display: flex; makes the cell lose some of its desirable table cell properties, since it is no longer set to display: table-cell;, and there is no display: table-cell-flex.

So the only solution seems to be to add a container <div> element inside the <td>, which should by nature take up the entire table cell except for its padding if any, and make it have display: flex; so that I can use flexbox styles for the content.

 table {
    box-sizing: border-box;
    border-collapse: collapse;
 }
 td {
    border-left: thin solid #d3d3d3;
    border-right: thin solid #d3d3d3;
}
td {
    display: table-cell;
    vertical-align: inherit;
}
.d-flex {    display: flex;    }

<table class="my-grid">
    <tr>
       <td>cell one</div></td>
        <td><div class="d-flex">cell two</div></td>
    </tr>
    <tr>
        <td>cell three</td>
        <td>cell four</td>
       
    </tr>

</table>

Is the collapsing border model's implementation in web browsers valid?

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.

Creating table rows with wide borders without bleeding into adjacent rows

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.

Borders disappear in Chrome when I zoom in

I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:

If you have a table border like this one:

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

Change it to this one:

INPUT,TEXTAREA {
border-top: thin solid #aaa
}

I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

I hope it helps

Different thicknesses for the border-collapse in a table on firefox

I solved the problem just changing the CSS code:

table.bordasimples {
    border-spacing: 0px;
    border:1px solid #D2DDD4;
}
table.bordasimples tr td, table.bordasimples tr th
{border:1px solid #D2DDD4;}

I replaced the border-collapse for border-spacing and changed the color of borders, now my table is the way I wanted, and with a better layout.

Thanks everyone!

overflow: hidden on table causes bottom and right border to dissappear

Thanks to skrivener and some further investigation I have managed to figure this out. See the solution here.

Problem - border collapsing not equal around table border:

.table1 {

    border          : 3px solid black;
    overflow        : hidden;
    border-collapse : collapse;
}

Solution - must not declare border width in border must do it using border-width:

.table2 {

    border          : solid black;
    overflow        : hidden;
    border-collapse : collapse;
    border-width    : 6px 7px 7px 6px;
}

th {

    border: 1px solid black;
}

th {

    border: 1px solid black;
}

Problem:

<table class="table1">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>

Solution:

<table class="table2">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>

Skrivener:

"The why of it happening, I think, is that when using the collapsed
border model of table borders the browser is trying to split the
border in the center. On a one-pixel outside border obviously that's
not possible, so the browser is using a full pixel width if top/left,
and nothing if bottom/right."

This let me to believe that perhaps if I just set the 4 borders setting border-width manually and added 1px to the right and the bottom, the rounding would work correctly. See the solution and you can update the borders to see it works correctly. Now no matter what you can have equal width outer borders as long as you add 1px to the right and bottom borders.

Thanks again for all the help!

Need Thin Table Borders in PDF Generated by cfDocument

Tables are so 90's but this does seem to work for cfdocument pdf (inconsistent on web browser display though):

.tbl {background-color:#000;}
.tbl td,th,caption{background-color:#fff}

...

<table cellspacing="1" class="tbl">
...
</table>

(border-spacing in style setting doesn't work - you have to put the attr in the table tag)

---

Related Topics