Web Analytics Made Easy -
StatCounter table rows not adjusting at all columns - CodingForum

Announcement

Collapse
No announcement yet.

table rows not adjusting at all columns

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • table rows not adjusting at all columns

    Hello,

    Please see table at the bottom of the page

    http://www.tuterconstruction.com/about.html

    The rows are not increasing in height automatically, if I have an entry long enough at another column, to cause that row to increase in height.

    How can I correct this?

    I am pasting the css code of the table below:

    /* START table styles */
    .tbl {
    float:left;
    margin-top:10px;
    width:100%;
    }
    *:first-child+html .tbl { /* this applies only to ie7 */
    margin-bottom:10px;
    }
    .tbl td {
    float:left;
    }
    .tbl tr td {
    padding:4px 0 4px 14px;
    }
    .tbl tr .td-1 {
    width:116px;
    }
    .tbl tr .td-2 {
    width:105px;
    }
    .tbl tr .td-3 {
    width:98px;
    }
    .tbl tr .td-4 {
    width:120px;
    }
    .tbl tr .td-5 {
    width:128px;
    }
    /* END table styles */

  • #2
    Code:
    .tbl td {
    	float:left;
    }
    Causes a lot of your problems
    Code:
    .tbl {
    	width:100%;
    }
    Also causes some.

    Your table looks better if the entire styling you posted is removed

    PS - use &gt; and &lt; for > and < in the tables. ex =
    Code:
    <td class="td-3">10M-20M&lt;</td>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      tables are naturally setup to "float left", since each td is next to the one before it. So specifying the float: left is what is causing the table td's not to be the same height.
      WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

      Comment


      • #4
        Originally posted by resdog View Post
        tables are naturally setup to "float left", since each td is next to the one before it. So specifying the float: left is what is causing the table td's not to be the same height.
        thanks this resolved it i removed the float left. however i am not still clear how it resolved it. just for my learning...

        Comment


        • #5
          Originally posted by sunfighter View Post
          Code:
          .tbl td {
          	float:left;
          }
          Causes a lot of your problems
          Code:
          .tbl {
          	width:100%;
          }
          Also causes some.
          what do you mean by this? just for my learning. especially by width 100% causing some?

          Comment


          • #6
            About the float. It essentially "breaks" that element (in this case the cell) out of the container. It may as well just be a div on its own at that point, with a height based on the contents. Simply put, don't use floats on rows or cells in a table - they break.

            The width 100% comment was because you are defining the width of all of the columns and as such already defining the total width the table can have. The total of those columns may or may not be equal to the total width of the container the table is in but since you are telling the table to stretch beyond that width if it wasn't wide enough already the browser will adjust the column widths as it needs - making the defined widths worthless.

            That's not to say you can't use a width 100% on a table. If you do you just can't define all the column widths. At least one has to be left undefined for the system to adjust as needed to fit the table to the full width to of its container.

            Comment


            • #7
              got it. thanks

              Comment

              Working...
              X