#1
  1. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111

    How-To get TFOOT cell to expand full width


    Here's the current link of the project.
    http://www.chessbook.net/ZULUTESTING...m_chess&id=593
    (scroll to very bottom of charts at bottom of page)

    Now, PHP builds the overall table as desired... Outer table's TBODY is 2 TD wide, each holding an inner table for a team's listing. Now, the issue is the footer via TFOOT, defined just prior to the TBODY. I have the row's background set to green to define it is expanding the full table's width, but everything I've tried so far is failing to get the 1 cell, with a background of red, to expand that full width.

    Any assistance would be greatly appreciated. Thank you!
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,436
    Rep Power
    9645
    Set colspan=2 and get rid of the display:block you have for thead/tfoot tr and tbody (which you should do anyways because overriding display on table parts is evil).
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Hmmm... That solved the problem, but it appears the reason such was defined "display: block;" was for 2 tables to show next to each other? If you view a different tournament, the left "standings" table and right "games" table are no longer next to one another. Any suggested action for placing 2 tables next to each other?

    EDIT: And as long as I'm reading the old code correctly, it appears the intent of the 2 tables next to each other were intended as the left is "align: left" as the right was "align: right" as a block items, with 1 being floated.
    Last edited by Triple_Nothing; March 15th, 2017 at 04:06 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  6. #4
  7. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,436
    Rep Power
    9645
    At least three options:
    a) Floating would be easy, so if it works for you then go for it. Personally I try to avoid floating because it's a hassle to deal with.
    b) Stick each table in an inline-block'd div (and leave the tables themselves alone)
    c) Put them all in one div and use flex (which doesn't require setting a display on the contained elements)
  8. #5
  9. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Both tables seemed to be in their own DIV which were each floated left/right. Option B, inline-block, seemed to be nice an clean. The odd part is I am receiving an undefined height from each row, yet nothing is defining the height. Do you see any cause for this extra spacing? Thanks for any help.

    NOTE: I removed the overlay to see if that was part of the issue, but had no effect, so I put it back.
    Last edited by Triple_Nothing; March 15th, 2017 at 04:42 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  10. #6
  11. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,436
    Rep Power
    9645
    They look like they have heights to me. Are you still floating stuff? Floated elements are removed from the regular layout, and if there aren't any other sibling elements then the parent will collapse to 0 height - having nothing else to "push" it down.
    But I don't see any floating.

    And actually undefined undefined? That's a Javascript thing. And I do see a few Javascript errors...
  12. #7
  13. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Well, the only floats I saw him have were the ones that were on the 2 DIVs surrounding the tables, which I changed to the display: inline-blocks... All I see to the basic layout is 2 DIVS, each containing a table w/ 4 simple columns. I don't see any wrap-arounds or anything creating any reason for the "height" applied to each row... As far as the noted script errors, those are outside the iframe this all resides in. :/
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  14. #8
  15. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,436
    Rep Power
    9645
    Extra spacing before one of those tables? The fourth one, counting top left to bottom right? That's because the other table in the row (to its left) is taller, and table cells have vertical-align:middle by default: the one with spacing is just being centered (vertically) within that row.
  16. #9
  17. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    A clean example script that has the spacing... All IMG items are just flags w/ height=12px and width=20px... See anything in here that would make the rows be taller than a single line of text?
    Code:
    <DIV id="standings">
      <TABLE>
        <THEAD>
          <TR><TH>Rank<TH>Player<TH>Score<TH>Rating
        </THEAD>
        <TFOOT>
          <TR><TD colspan="2" style="text-align: left; width: 197px;">10 Players<TD colspan="2" style="text-align: right; width: 197px;">Average Rating: 2044
        </TFOOT>
        <TBODY>
          <TR><TD>1<TD><DIV><IMG src="" /> Tsolakidou, Stavroul...</DIV><TD>4 / 5<TD>2390
          <TR><TD>2<TD><DIV><IMG src="" /> Pavlidou, Ekaterini</DIV><TD>4 / 5<TD>2166
          <TR><TD>3<TD><DIV><IMG src="" /> Markantonaki, Harito...</DIV><TD>4 / 5<TD>2174
          <TR><TD>4<TD><DIV><IMG src="" /> Makka, Evanthia</DIV><TD>3 / 5<TD>2073
          <TR><TD>5<TD><DIV><IMG src="" /> Serefidou, Despina</DIV><TD>3 / 5<TD>1933
          <TR><TD>6<TD><DIV><IMG src="" /> Grapsa, Georgia</DIV><TD>1 / 5<TD>2049
          <TR><TD>7<TD><DIV><IMG src="" /> Makka, Ioulia</DIV><TD>1 / 5<TD>2116
          <TR><TD>8<TD><DIV><IMG src="" /> Kouvatsou, Maria</DIV><TD>1 / 5<TD>2071
          <TR><TD>9<TD><DIV><IMG src="" /> Stoumbou, Eleni</DIV><TD> / 5<TD>1843
          <TR><TD>10<TD><DIV><IMG src="" /> Lemoni, Maria - Ioan...</DIV><TD> / 5<TD>1633
        </TBODY>
      </TABLE>
    </DIV>
    <DIV id="games">
      <TABLE>
        <THEAD>
          <TR><TH>Board<TH>White<TH>Results<TH>Black
        </THEAD>
        <TFOOT>
          <TR><TD colspan="4" style="text-align: center; width: 620px;"><UL><LI>Round: 1...10</LI></UL></TD></TR>
        </TFOOT>
        <TBODY>
          <TR><TD>1<TD><IMG src="" /> Serefidou, Despina (3)  (1933)<TD> - <TD><IMG src="" /> Grapsa, Georgia (1)  (2049)
          <TR><TD>2<TD><IMG src="" /> Makka, Evanthia (3)  (2073)<TD>0 - 1<TD><IMG src="" /> Tsolakidou, Stavroul... (4)  (2390)
          <TR><TD>3<TD><IMG src="" /> Markantonaki, Harito... (4)  (2174)<TD>1 - 0<TD><IMG src="" /> Kouvatsou, Maria (1)  (2071)
          <TR><TD>4<TD><IMG src="" /> Pavlidou, Ekaterini (4)  (2166)<TD>1 - 0<TD><IMG src="" /> Stoumbou, Eleni ()  (1843)
          <TR><TD>5<TD><IMG src="" /> Makka, Ioulia (1)  (2116)<TD>1 - 0<TD><IMG src="" /> Lemoni, Maria - Ioan... ()  (1633)
        </TBODY>
      </TABLE>
    </DIV>
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  18. #10
  19. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,436
    Rep Power
    9645
    Hard to tell. There are DIVs in those cells when there probably shouldn't be; if you need a container then a SPAN would be more appropriate.
  20. #11
  21. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    I even removed both DIVs and entered text "Testing" just for test sake, but the spacing doesn't change at all. Everything is building 1 line tall on a team chart, but not the individuals. And to make it a bit more odd, the left/right charts are 2 separate charts, each in their own DIV/TABLE, so they shouldn't exactly have a row-by-row effect on one another... :S
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  22. #12
  23. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Hmmm... Not sure on this, but I found a fix... The TBODY's had a "height" defined of 200px, but it seemed that was being applied to rows or cells. Once I changed it from "height" to "max-height", it applied correctly. Any idea to this reasoning? :-S

    EDIT: And I think the reasoning to the prior "display: block" was to obtain a scrollable TBODY, which is now just made "display: block" itself.
    Last edited by Triple_Nothing; March 16th, 2017 at 08:16 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

IMN logo majestic logo threadwatch logo seochat tools logo