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
Post a Comment