11 Replies Latest reply on Oct 15, 2006 7:40 AM by Newsgroup_User

    [CSS] Printing thin table borders

    Level 7
      Hi,

      I'm using the following (simplified) CSS and HTML to display thin table
      borders:

      .tblData {
      background-color: #000;
      }
      .tblData tr {
      background-color: #FFF;
      }

      <table cellpadding='2' cellspacing='1' border='0' width='100%'
      class='tblData'>
      <tr><td>blah, blah, blah</td><td>blah, blah, blah</td></tr>
      </table>

      This works fine on screen. But when printing, the black 'borders' are not
      printed.
      Does anyone why this is and how to solve it?

      Thanks in advance

      Regards, Marja


        • 1. Re: [CSS] Printing thin table borders
          Level 7
          > Does anyone why this is and how to solve it?

          Background color printing is a local browser preference.

          Why not just use td { border:1px solid black; }?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "Marja de Vroed" <marja@clubwebware.nl.no.spam> wrote in message
          news:egqje6$nlu$1@forums.macromedia.com...
          > Hi,
          >
          > I'm using the following (simplified) CSS and HTML to display thin table
          > borders:
          >
          > .tblData {
          > background-color: #000;
          > }
          > .tblData tr {
          > background-color: #FFF;
          > }
          >
          > <table cellpadding='2' cellspacing='1' border='0' width='100%'
          > class='tblData'>
          > <tr><td>blah, blah, blah</td><td>blah, blah, blah</td></tr>
          > </table>
          >
          > This works fine on screen. But when printing, the black 'borders' are not
          > printed.
          > Does anyone why this is and how to solve it?
          >
          > Thanks in advance
          >
          > Regards, Marja
          >


          • 2. Re: [CSS] Printing thin table borders
            Level 7
            > Why not just use td { border:1px solid black; }?

            Because then you get a double border between cells on the same row and
            between rows.

            Regards, Marja


            • 3. Re: [CSS] Printing thin table borders
              Level 7
              > Why not just use td { border:1px solid black; }?

              But you did put me on the right track... this seems to be doing the trick:

              .tblData {
              border-top: 1px solid #000;
              border-left: 1px solid #000;
              }
              .tblData th, .tblData td {
              border-right: 1px solid #000;
              border-bottom: 1px solid #000;
              }

              Thanks!

              Regards, Marja


              • 4. Re: [CSS] Printing thin table borders
                Level 7
                That's exactly the way to do it.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.dreamweavermx-templates.com - Template Triage!
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                ==================


                "Marja de Vroed" <marja@clubwebware.nl.no.spam> wrote in message
                news:egqn3u$rfl$1@forums.macromedia.com...
                >> Why not just use td { border:1px solid black; }?
                >
                > But you did put me on the right track... this seems to be doing the trick:
                >
                > .tblData {
                > border-top: 1px solid #000;
                > border-left: 1px solid #000;
                > }
                > .tblData th, .tblData td {
                > border-right: 1px solid #000;
                > border-bottom: 1px solid #000;
                > }
                >
                > Thanks!
                >
                > Regards, Marja
                >


                • 5. Re: [CSS] Printing thin table borders
                  Level 7
                  then, "Murray *ACE*" mounted the rostrum and spoke like this:

                  > That's exactly the way to do it.
                  >
                  >
                  > "Marja de Vroed" <marja@clubwebware.nl.no.spam> wrote in message
                  > news:egqn3u$rfl$1@forums.macromedia.com...
                  >>> Why not just use td { border:1px solid black; }?
                  >>
                  >> But you did put me on the right track... this seems to be doing the
                  >> trick:
                  >>
                  >> .tblData {
                  >> border-top: 1px solid #000;
                  >> border-left: 1px solid #000;
                  >> }
                  >> .tblData th, .tblData td {
                  >> border-right: 1px solid #000;
                  >> border-bottom: 1px solid #000;
                  >> }
                  >>
                  >> Thanks!
                  >>
                  >> Regards, Marja

                  what about:

                  .tbldata {
                  border-collapse: collapse;
                  }
                  .tbldata td, .tbldata th {
                  border: 1px solid #000000;
                  }

                  ?

                  --
                  </gt>
                  --------------------
                  Please, remove hyphens to contact me
                  • 6. Re: [CSS] Printing thin table borders
                    Level 7
                    >>> But you did put me on the right track... this seems to be doing the
                    >>> trick: .tblData {
                    >>> border-top: 1px solid #000;
                    >>> border-left: 1px solid #000;
                    >>> }
                    >>> .tblData th, .tblData td {
                    >>> border-right: 1px solid #000;
                    >>> border-bottom: 1px solid #000;
                    >>> }
                    >>>
                    >>> Thanks!
                    >>>
                    >>> Regards, Marja
                    >
                    > what about:
                    >
                    > .tbldata {
                    > border-collapse: collapse;
                    > }
                    > .tbldata td, .tbldata th {
                    > border: 1px solid #000000;
                    > }
                    >
                    > ?

                    Yep, that works okay as well.
                    Which one of these methods would be preferred and why?

                    Regards, Marja


                    • 7. Re: [CSS] Printing thin table borders
                      Level 7
                      then, "Marja de Vroed" mounted the rostrum and spoke like this:

                      >>>> But you did put me on the right track... this seems to be doing the
                      >>>> trick: .tblData {
                      >>>> border-top: 1px solid #000;
                      >>>> border-left: 1px solid #000;
                      >>>> }
                      >>>> .tblData th, .tblData td {
                      >>>> border-right: 1px solid #000;
                      >>>> border-bottom: 1px solid #000;
                      >>>> }
                      >>>>
                      >>>> Thanks!
                      >>>>
                      >>>> Regards, Marja
                      >>
                      >> what about:
                      >>
                      >> .tbldata {
                      >> border-collapse: collapse;
                      >> }
                      >> .tbldata td, .tbldata th {
                      >> border: 1px solid #000000;
                      >> }
                      >>
                      >> ?
                      >
                      > Yep, that works okay as well.
                      > Which one of these methods would be preferred and why?
                      >
                      > Regards, Marja

                      I'm in deep doubt too ;)

                      That's why I posted to Murray's answer. He's an expert, and I've expected to
                      correct me if that approach was wrong!

                      • 8. Re: [CSS] Printing thin table borders
                        Level 7
                        I don't use the border collapse method because IE6 has a hinky bug with it.
                        After IE7 is out, maybe I will....

                        --
                        Murray --- ICQ 71997575
                        Adobe Community Expert
                        (If you *MUST* email me, don't LAUGH when you do so!)
                        ==================
                        http://www.dreamweavermx-templates.com - Template Triage!
                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                        http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                        ==================


                        "Marja de Vroed" <marja@clubwebware.nl.no.spam> wrote in message
                        news:egrqb1$67b$1@forums.macromedia.com...
                        >>>> But you did put me on the right track... this seems to be doing the
                        >>>> trick: .tblData {
                        >>>> border-top: 1px solid #000;
                        >>>> border-left: 1px solid #000;
                        >>>> }
                        >>>> .tblData th, .tblData td {
                        >>>> border-right: 1px solid #000;
                        >>>> border-bottom: 1px solid #000;
                        >>>> }
                        >>>>
                        >>>> Thanks!
                        >>>>
                        >>>> Regards, Marja
                        >>
                        >> what about:
                        >>
                        >> .tbldata {
                        >> border-collapse: collapse;
                        >> }
                        >> .tbldata td, .tbldata th {
                        >> border: 1px solid #000000;
                        >> }
                        >>
                        >> ?
                        >
                        > Yep, that works okay as well.
                        > Which one of these methods would be preferred and why?
                        >
                        > Regards, Marja
                        >


                        • 9. Re: [CSS] Printing thin table borders
                          Level 7
                          To see it, put a table styled with border collapse into a hidden layer.

                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.dreamweavermx-templates.com - Template Triage!
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                          ==================


                          "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                          news:egt77r$lmb$1@forums.macromedia.com...
                          >I don't use the border collapse method because IE6 has a hinky bug with it.
                          >After IE7 is out, maybe I will....
                          >
                          > --
                          > Murray --- ICQ 71997575
                          > Adobe Community Expert
                          > (If you *MUST* email me, don't LAUGH when you do so!)
                          > ==================
                          > http://www.dreamweavermx-templates.com - Template Triage!
                          > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          > http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                          > ==================
                          >
                          >
                          > "Marja de Vroed" <marja@clubwebware.nl.no.spam> wrote in message
                          > news:egrqb1$67b$1@forums.macromedia.com...
                          >>>>> But you did put me on the right track... this seems to be doing the
                          >>>>> trick: .tblData {
                          >>>>> border-top: 1px solid #000;
                          >>>>> border-left: 1px solid #000;
                          >>>>> }
                          >>>>> .tblData th, .tblData td {
                          >>>>> border-right: 1px solid #000;
                          >>>>> border-bottom: 1px solid #000;
                          >>>>> }
                          >>>>>
                          >>>>> Thanks!
                          >>>>>
                          >>>>> Regards, Marja
                          >>>
                          >>> what about:
                          >>>
                          >>> .tbldata {
                          >>> border-collapse: collapse;
                          >>> }
                          >>> .tbldata td, .tbldata th {
                          >>> border: 1px solid #000000;
                          >>> }
                          >>>
                          >>> ?
                          >>
                          >> Yep, that works okay as well.
                          >> Which one of these methods would be preferred and why?
                          >>
                          >> Regards, Marja
                          >>
                          >
                          >


                          • 10. Re: [CSS] Printing thin table borders
                            Level 7
                            then, "Murray *ACE*" mounted the rostrum and spoke like this:

                            > To see it, put a table styled with border collapse into a hidden layer.
                            >
                            >
                            I don't even dare to try it, if you said so ;)

                            Thanks Murray
                            • 11. Re: [CSS] Printing thin table borders
                              Level 7
                              I'll save you the trouble. Even though the layer is hidden, amazingly, you
                              still see the table borders, although not its content!

                              --
                              Murray --- ICQ 71997575
                              Adobe Community Expert
                              (If you *MUST* email me, don't LAUGH when you do so!)
                              ==================
                              http://www.dreamweavermx-templates.com - Template Triage!
                              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                              http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                              ==================


                              "geotso" <kata-ye-xi@yahoo.gr> wrote in message
                              news:egth7t$2mk$1@forums.macromedia.com...
                              > then, "Murray *ACE*" mounted the rostrum and spoke like this:
                              >
                              >> To see it, put a table styled with border collapse into a hidden layer.
                              >>
                              >>
                              > I don't even dare to try it, if you said so ;)
                              >
                              > Thanks Murray