3 Replies Latest reply: Jan 3, 2008 8:38 AM by Newsgroup_User RSS

    Table in Div

    sandanz
      I have tables nested in an AP Div. The table width is set in CSS. It renders ok in browsers, but on my local site the table is 1800 or more pixels, extends past the div it is nested in, and I can't adjust column widths.

      Also, can't figure out how to center table within div.

      http://www.viva-city.info/cityLife_civic.htm
        • 1. Re: Table in Div
          Newsgroup_User Community Member
          Here's why you may not want to do this -

          http://www.great-web-sights.com/g_layer-overlap.asp

          Anyhow, this CSS rule is causing your problem -

          #table, tr, td {

          border: 1px solid #b8b8b8;

          background-color: #131313;

          td padding: 6px;

          width: 600px;

          padding-top: 2px;

          padding-right: 2px;

          padding-bottom: 2px;

          padding-left: 4px;

          background-position: center;

          }

          It's setting your <td> widths to 600px.

          In general you have WAY TOO MUCH (verbose and redundant) CSS in there....


          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "sandanz" <webforumsuser@macromedia.com> wrote in message
          news:flj03e$goi$1@forums.macromedia.com...
          >I have tables nested in an AP Div. The table width is set in CSS. It
          >renders ok
          > in browsers, but on my local site the table is 1800 or more pixels,
          > extends
          > past the div it is nested in, and I can't adjust column widths.
          >
          > Also, can't figure out how to center table within div.
          >
          > http://www.viva-city.info/cityLife_civic.htm
          >

          • 2. Table in Div
            sandanz Community Member
            Deleted. I figured it out! Thanks!
            • 3. Re: Table in Div
              Newsgroup_User Community Member
              The rule I quoted does ever so much more than that. If you want that rule
              to apply only to the table tag, it should be like this -

              table {
              border: 1px solid #b8b8b8;
              background-color: #131313;
              width: 600px;
              }
              td {
              padding: 2px 2px 2px 4px;
              background-position: center;
              }

              although I'm not clear on where the background position should be placed,
              since I don't know if you intended it to apply to the <table> or the <td>.

              Note also that you used an octothorpe ("#") as the first character of your
              selector which, in this case, was inappropriate since that looks for an
              element with id ="table", and you are wanting to just style the table tag -
              <table>. In this case, you would just use a tag selector - 'table'.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "sandanz" <webforumsuser@macromedia.com> wrote in message
              news:flj135$hri$1@forums.macromedia.com...
              > So how do I write a CSS rule to set the border colors, padding, and table
              > centered within div?
              >
              > Sorry, I'm new at this.