html - How do I collapse the gaps in my table style? -



html - How do I collapse the gaps in my table style? -

i have table have build via code, because it's representing grouped info query based on person's name. person xyz has 4 rows of data... question how style each grouping alternating in color?

here's have far , works, there's gaps on sides, top , bottom of each cell, want color groups solid.... no gaps... i've given table rows , td class name of alternate ones colored..alternate

tr.alternate{background-color:#aaa;} td.alternate{background-color:#aaa}

you can utilize border-collapse: collapse in table.

the border-collapse css property selects table's border model. has big influence on , style of table cells.

the separated model traditional html table border model. adjacent cells each have own distinct borders. distance between them given border-spacing property.

in collapsed border model, adjacent table cells share borders. in model, border-style value of inset behaves groove, , outset behaves ridge.

source: border-collapse developer mozilla

example without border-collapse:

class="snippet-code-css lang-css prettyprint-override">tr.alternate { background-color: #aaa; } class="snippet-code-html lang-html prettyprint-override"><table> <tr class="alternate"> <td>test</td> <td>test</td> <td>test</td> </tr> <tr class="alternate"> <td>test</td> <td>test</td> <td>test</td> </tr> </table>

example border-collapse:

class="snippet-code-css lang-css prettyprint-override">table { border-collapse: collapse; } tr.alternate { background-color: #aaa; } class="snippet-code-html lang-html prettyprint-override"><table> <tr class="alternate"> <td>test</td> <td>test</td> <td>test</td> </tr> <tr class="alternate"> <td>test</td> <td>test</td> <td>test</td> </tr> </table>

as can see don't need separate class td.

html css

Comments

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -