Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS - table column widths not responding

    Hi, my CSS code is not having any effect on my table's column widths and I can't figure out why..

    I want the whole table to be 494px long. I tried
    Code:
    width: 148px 49px 100px 148px 49px;
    and
    Code:
    width: 30% 10% 20% 30% 10%;
    with and without width: 494px or 100% in the table.jdmprices.... So I don't know what's up!

    Here is my code without any cell width specification:

    Code:
      <style type="text/css">
    table.jdmprices {
      clear: both;
      margin: 10px auto;
      border-collapse: collapse;
      font-size: 1.1em;
    }
    table.jdmprices th {
      font-size: 1.5em;
      text-align: left;
      clear: left;
      line-height: 150%;
      padding: 2px 4px;
      color: #24355E;
    }
    table.jdmprices th.header2 {
      padding: 2px 15px;
      text-transform: uppercase;
      text-align: left;
      font-size: 1em;
      color: #000;
      background-color: #FFFF80;
    }
    table.jdmprices td {
      padding: 2px 4px;
      text-align: left;
    }
    table.jdmprices tr.alt {
      background-color: #F3F3F3;
    }
       </style>
    
        <table class="jdmprices" border="1">
          <tr>
            <th colspan="5">Header</th>
          </tr>
          <tr>
            <th colspan="5" class="header2">description</th>
          </tr>
          <tr>
            <td colspan="5">Product</td>
          </tr>
          <tr>
            <td>size</td>
            <td>$price</td>
            <td></td>
            <td>size</td>
            <td>$price</td>
          </tr>
        </table>

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Can you post the mark up for the table

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You mean this:

    Code:
        <table class="jdmprices" border="1">
          <tr>
            <th colspan="5">Header</th>
          </tr>
          <tr>
            <th colspan="5" class="header2">description</th>
          </tr>
          <tr>
            <td colspan="5">Product</td>
          </tr>
          <tr>
            <td>size</td>
            <td>$price</td>
            <td></td>
            <td>size</td>
            <td>$price</td>
          </tr>
        </table>

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Strange coding and css rules. You've defined FIVE values for the widths??

    Last I heard there is only top, right, bottom, and left.

    Then you keep saying you want the table to be "this" long, but widths have to do with...well width.

    Now, having said all that, if you want to simply tell a table to be a certain width, then in your css:

    Code:
    table {width: 494px;}
    works fine.

    You could also simply use the inline method:

    Code:
    <table width="494" border="1">
    Now, it seems like you are displaying columnar data, but if not you should read why tables for layouts are bad.

    But I suspect you're trying to specify column widths correct? Hence the 5 values. You need to style the <td> or <th> tag instead of the WHOLE table then.
    Last edited by teedoff; 04-08-2011 at 07:42 PM.
    Teed

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay well thanks. I changed my mind and went with a different layout using less table.

    The 5 widths were for the 5 cells.

    Thanks for the website though. Was very interesting.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •