www.webdeveloper.com
Results 1 to 7 of 7

Thread: Rowspan not using top row

  1. #1
    Join Date
    Nov 2013
    Posts
    41

    Question Rowspan not using top row

    I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns. I tried accomplishing this by adding rows above and below it and then using rowspan. For some reason, it only works on the bottom row.

    It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height). JSFiddle: http://jsfiddle.net/DaAwesomeP/aU9Le/

    Basic HTML Layout (the full fiddle has the css):
    HTML Code:
    <table id="weatherForecast">
      <tr class="weatherForecast-row-outer">
        <td></td>
      </tr>
      <tr id="weatherForecast-row">
        <td id="weatherForecast-DATE" class="weatherForecast-day  weatherForecast-day-today" rowspan="2">
          <!-- Cell Content for "Today" Here -->
        <td id="weatherForecast-DATE" class="weatherForecast-day ">
          <!-- Cell Content Here. There are 4 of these -->
        </td>
      </tr>
      <tr class="weatherForecast-row-outer">
        <td></td>
      </tr>
    </table>
    An image showing what I am trying to accomplish:
    http://s14.postimg.org/ba3xwcm75/Row...ng_top_row.png


    I tried posting this on StackOverflow, but I was told it was a design question. So I saw this: http://meta.stackoverflow.com/questi...-stackoverflow which said to post in on Pro Webmasters or User Experience, which I tried and then got suspended. I hope that the community on this site can answer my question.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,159
    Without digging through your code, my instinct is that you should avoid trying to create this display with a single table. Tables depend on balancing the <tr>'s and <td>'s and if you have a situation where the contents will vary, you're much better off having an independent container for each "day" and set the style to "float:left;" on them. That way the content of each day has no impact on the mark-up required to display any other day. Something like:
    Code:
    <style type="text/css">
    
    #weatherForecast {
        margin: 10px auto;
        padding: 0px;
        width: 87%;
    }
    
    .weatherForecast-day {
        float:left;
        margin: 0px 2px;
        padding: 0px;
        padding-bottom: 5px;
        border-top: 1px solid #FFDC8C;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        width: 14.285714285714285714285714285714%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 100%;
        vertical-align: top;
    }
    
    </style>
    <div id="weatherForecast">
    <div id="weatherForcast-DATE" class="weatherForecast-day weatherForecast-day-today">
    <p>Cell Content for "Today" Here</p>
    </div>
    <div id="weatherForcast-DATE" class="weatherForecast-day">
    <p>Cell Content Here. There are 4 of these</p>
    </div>
    <div id="weatherForcast-DATE" class="weatherForecast-day">
    <p>Cell Content Here. There are 4 of these</p>
    </div>
    <div id="weatherForcast-DATE" class="weatherForecast-day">
    <p>Cell Content Here. There are 4 of these</p>
    </div>
    <div id="weatherForcast-DATE" class="weatherForecast-day">
    <p>Cell Content Here. There are 4 of these</p>
    </div>
    <br style="clear:left;">
    </div><!-- end #weatherForecast -->

  3. #3
    Join Date
    Nov 2013
    Posts
    41
    Thanks! I see where you're going. However, this won't work. I tried to avoid tables in the first place, but it was he only way I could get the heights to all be the same if one content was bigger than the other. Look here: http://jsfiddle.net/DaAwesomeP/BZuYz/. Once cell is taller than the others. If you look in the original fiddle, you will see that they all have different "conditions." The last two are much larger than the first three. Is it possible to make sure that the heights are all the same in pure CSS and HTML?

  4. #4
    Join Date
    Nov 2013
    Posts
    41
    Solved it!
    By setting the "Today" cell to "display: block" I can make it act differently than the other cells without messing up the other cells. Fiddle: http://jsfiddle.net/DaAwesomeP/akCUc/.

    One Problem:
    I can't figure out why there is a small ( maybe 1 or 2px) space between each cell! See the link to the Fiddle in this post.

  5. #5
    Join Date
    Nov 2013
    Posts
    41
    Another problem:
    If I try this:
    Code:
    table#weatherForecast tr#weatherForecast-row td.weatherForecast-day-today {
        margin: -20px 0px 0px 0px;
    }
    The "Today" cell only moves up 10px, not 20px. How can I fix this?

  6. #6
    Join Date
    Nov 2013
    Posts
    41
    I fixed the spacing problem with:
    Code:
    border-collapse: collapse;
    border-spacing: 0px;
    But I still can't figure out why the "Today" cell isn't moving up high enough.

  7. #7
    Join Date
    Nov 2013
    Posts
    41
    Hmmm. Just realized that my "calc" is only working correctly in FF. How can I fix this (pure CSS/HTML please)?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles