4 Replies Latest reply on Dec 19, 2008 3:35 AM by dlipscombe

    Table and cell borders

    dlipscombe Level 1
      I'm using CS4. I set up a table style in my style sheet that calls for a 2 px wide orange border. The border only outlines the entire table but not the individual cells. Does anyone know how I can fix that in the style sheet?
      The URL is http://www.virginiacpac.org/pages/conference.html
      Thanks,
        • 1. Re: Table and cell borders
          Level 7
          Hello,

          Try this:

          .table_border {
          border-collapse:collapse;
          }
          .table_border td {
          border: 2px solid #E2832F;
          padding: 2px;
          }

          Take care,
          Tim


          "dlipscombe" <webforumsuser@macromedia.com> wrote in message
          news:giekco$bqj$1@forums.macromedia.com...
          > I'm using CS4. I set up a table style in my style sheet that calls for a 2
          > px
          > wide orange border. The border only outlines the entire table but not the
          > individual cells. Does anyone know how I can fix that in the style sheet?
          > The URL is http://www.virginiacpac.org/pages/conference.html
          > Thanks,
          >
          > .table_border {
          > border: 2px solid #E2832F;
          > padding: 2px;
          > }
          >


          • 2. Re: Table and cell borders
            dlipscombe Level 1
            That did it. Can you tell me why?

            • 3. Re: Table and cell borders
              Level 7
              Sure,

              Your table has a class of table_border, so your CSS is saying give the table
              a border that's 2px solid and orange:

              .table_border {
              border: 2px solid #E2832F;
              padding: 2px;
              }

              That results in a border around the table only.

              You wanted to give the cells in the table the border, so this CSS...

              .table_border td {
              border: 2px solid #E2832F;
              padding: 2px;
              }

              ...says to give every cell (td) that is inside an element with the class of
              table_border (your table) an orange border.

              Now, because each cell has a border of 2px, adjacent cells appear to have a
              4px border.
              Applying border-collapse:collapse to the table takes care of this.

              .table_border {
              border-collapse:collapse;
              }

              http://www.w3schools.com/Css/pr_tab_border-collapse.asp

              Take care,
              Tim



              "dlipscombe" <webforumsuser@macromedia.com> wrote in message
              news:giephl$hll$1@forums.macromedia.com...
              > That did it. Can you tell me why?
              >
              >


              • 4. Re: Table and cell borders
                dlipscombe Level 1
                Thanks Tim,
                I'm trying to learn more about writing code but it's not my strong point. I'm a designer and I know what I want something to look like and that's about it. CS4 is forcing me to learn more which is a good thing.
                Thanks again for taking the time to teach me.
                Dave