borders in the table do not collapse. Should have border-collapse:collapse property

[Wikinaut]

On my browser, tables look like this - the border lines on table rows and cells do not collapse:

I already tried to apply a patch, but I did not succeed in short time.

[Wikinaut]

I also found, that a class is undefined:

mostly like stemming from line 64 in datatables-render.js

htmlTbl += "<tr style='vertical-align:" + rowVAlign + ";background-color:" + 
rowBgColor + "; " + borders + "!important;' class='" + trClass + "'>";

[gedion]

Yes. I thought we needed css for rows but turned out not so but I didn't bother to clean it up.

@ audreyt did really well cleaning it up with the recent pull request. However I do not know much about LiveScript and I'm not sure weather to continue as JS or LS.

[Wikinaut]

Hi. I further analysed the border-collapse problem. I found,that a 3x3 table (for example) is composed of 3(!) tables with 1row x 3 colums each. This is why the "inside" borders do not collapse: they belong to different tables.

Can you confirm my observations

• the thick un-collapsed borders as shown
• the "one" table in the pad is actually constructed as three tables of single-row tables
  ?

It was not possible to find quickly an easy and convincing fix, because it would require a complicated re-design. Have you ever thought about doing this (a redesign). I added and checked in

* { border-collapse:collapse }

or manually, in all table related tags table, tbody, tr, td, but this did not the trick, because it isn's a single table as said above.

[Wikinaut]

I am willing to help to fix the plugin.

[Wikinaut]

@gedion Thanks for pointing to the work of audreyt - haven't seen that before. Will have a look to it. The move to LiveScript will certainly not please everyone.

[gedion]

@Wikinaut. Thank you Wikinaut. Would appreciate your help tremendously.

Yes. Your analysis is correct. Each row is a table itself. As you know changesets redraw a magic dom line each time there is a change. If we put an entire table(multiple rows) within a magic domline, performance becomes an issue. Also epLite limits the length of line characters to be about 2^11(2048). The size of a table would be limited drastically.

So we decided that we will have one row(hence one table) per line.

As you have run into, this brings accidental complexities. We have overcome a lot.

One suggestion to the one you're noticing is that we can apply our own border line sizes to make all border lines appear the same size. Right now, notice only the outer borders are 1 size less than the inner borders.

If we can make them the same size, the table won't be as ugly. However it will mean that we can't have a table of border size = 1

[Wikinaut]

@gedion ty very much for your detailed explanation, which helped me a lot. I still think, it would be possible to have all 1px borders (but now I know, this is not a matter of simply applying "border-collapse:collapse" to all table elements)

[gedion]

It'll be interesting to see your solution.