>> English << | česky | PortuguêsZVON > Tutorials > CSS2 tutorial
Intro / Search / ZVON
>> Example 46 << | Prev | Next | Index | Contents

There are two distinct models for setting borders on table cells in CSS. They are selected with border-collapse property. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model.

XML SourceCSS stylesheetExample link
(1)
     <AAA>
          <BBB>
               <CCC>ccc</CCC>
               <DDD>ddd</DDD>
               <EEE>eee</EEE>
          </BBB>
          <BBB>
               <CCC>ccc</CCC>
               <DDD>ddd</DDD>
               <EEE>eee</EEE>
          </BBB>
          <BBB>
               <CCC>ccc</CCC>
               <DDD>ddd</DDD>
               <EEE>eee</EEE>
          </BBB>
     </AAA>
* {padding:1ex; border:solid}
AAA {display: table; border-collapse:collapse}
BBB {display: table-row;}
CCC {display: table-cell;}
DDD {display: table-cell;}
EEE {display: table-cell;}
View output
XML SourceCSS stylesheetExample link
(2)
     <AAA>
          <BBB>
               <CCC>ccc</CCC>
               <DDD>ddd</DDD>
               <EEE>eee</EEE>
          </BBB>
          <BBB>
               <CCC>ccc</CCC>
               <DDD>ddd</DDD>
               <EEE>eee</EEE>
          </BBB>
          <BBB>
               <CCC>ccc</CCC>
               <DDD>ddd</DDD>
               <EEE>eee</EEE>
          </BBB>
     </AAA>
* {padding:1ex; border:solid}
AAA {display: table; border-collapse:separate}
BBB {display: table-row;}
CCC {display: table-cell;}
DDD {display: table-cell;}
EEE {display: table-cell;}
View output