title: Markup and CSS to present Table Data
body: <p>I have the following "Table" :</p>
  
  <p><img src="https://i.stack.imgur.com/70d5i.png" alt="enter image description here"></p>
  
  <p>Where i want the blue blocks to have specific width and the yellow blocks to expand to fill the rest of the space, based on the container width.</p>
  
  <p>My current approach is to have every block of every row float left and i give them specific width, but this approach is not scalable and not responsive.</p>
  
  <p>Can you please suggest me a better approach for what i want to achieve?</p>
  
  <p>I have also made a fiddler so you can play with the markup and see what i did.</p>
  
  <p><a href="http://jsfiddle.net/RickyStam/bG4dA/" rel="nofollow noreferrer">http://jsfiddle.net/RickyStam/bG4dA/</a></p>
  
  <p>Below is my HTML</p>
  
  <pre><code>&lt;div class="iframe-container"&gt;
              &lt;div class="content"&gt;
                  &lt;div class="betcontainer"&gt;
                      &lt;p class="bettitle"&gt;Match Outcome&lt;/p&gt;
                      &lt;div class="betheaderwrap"&gt;&lt;span class="betheader"&gt;Away&lt;/span&gt;&lt;span class="betheader"&gt;Draw&lt;/span&gt;&lt;span class="betheader"&gt;Home&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;span class="bettext-big"&gt;TEAM A v TEAM B&lt;/span&gt;&lt;span class="bet"&gt;3.30&lt;/span&gt;&lt;span class="bet"&gt;3.30&lt;/span&gt;&lt;span class="bet"&gt;2.15&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="seperatebets"&gt;&lt;/div&gt;
                  &lt;div class="betcontainer"&gt;
                      &lt;p class="bettitle"&gt;Goal&lt;/p&gt;
                      &lt;div&gt;&lt;span class="bettext-medium"&gt;Over 2.5&lt;/span&gt;&lt;span class="bet"&gt;2.05&lt;/span&gt;&lt;span class="bettext-medium"&gt;Over 2.5&lt;/span&gt;&lt;span class="bet"&gt;1.70&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="betcontainer"&gt;
                      &lt;p class="bettitle"&gt;1st Half&lt;/p&gt;
                      &lt;div class="betheaderwrap"&gt;&lt;span class="betheader"&gt;Away&lt;/span&gt;&lt;span class="betheader"&gt;Draw&lt;/span&gt;&lt;span class="betheader"&gt;Home&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;span class="bettext-big"&gt;TEAM A v TEAM B&lt;/span&gt;&lt;span class="bet"&gt;3.80&lt;/span&gt;&lt;span class="bet"&gt;2.00&lt;/span&gt;&lt;span class="bet"&gt;2.80&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="betcontainer"&gt;
                      &lt;p class="bettitle"&gt;Half with most goals&lt;/p&gt;
                      &lt;div&gt;&lt;span class="bettext-xlarge"&gt;1st Half&lt;/span&gt;&lt;span class="bet"&gt;3.20&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;span class="bettext-xlarge"&gt;2nd Half&lt;/span&gt;&lt;span class="bet"&gt;1.95&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;span class="bettext-xlarge"&gt;Draw&lt;/span&gt;&lt;span class="bet"&gt;3.30&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.clear {
      clear: both;
  }
  
  body {
      font-family: Arial;
  }
  .iframe-container {
      width: 610px;
      height: 370px;
      background: #f3f3f3;
      position:relative;
      overflow:hidden;
  }
  
  .content {
      margin-top: 40px;
      height:300px;
      overflow-y:auto;
      padding:0px 20px;
  }
  
  .bet {
      width:66px;
      display:block;
      line-height:27px;
      text-align:center;
      background:blue;
      float:left;
      border-top:1px solid #cad6e4;
      border-bottom:1px solid #cad6e4;
      border-right:1px solid #cad6e4;
      cursor:pointer;
      font-weight:bold;
      color:white;
  }
  .bet:hover{
      background:grey;
      color:white;
  }
  
  .betcontainer {
      width:556px;
      font-size:12px;
      font-family:Arial;
  }
  .bettitle {
      width:551px;
      line-height:27px;
      padding-left:3px;
      background: red;
      color:white;
      font-weight:bold;
      border:1px solid #cad6e4;
  }
  
  .bettext-big{
      float:left;
      line-height:27px;
      width:347px;
      background:yellow;
      padding-left:6px;
      border:1px solid #cad6e4;
  }
  .bettext-medium{
      float:left;
      line-height:27px;
      width:203px;
      background:yellow;
      padding-left:6px;
      border:1px solid #cad6e4;
  
  }
  .bettext-xlarge{
      float:left;
      line-height:27px;
      width:481px;
      background:yellow;
      padding-left:6px;
      border:1px solid #cad6e4;
  }
  
  .betheaderwrap {
      width:100%;
      height:15px;
      background:#ddd;
  }
  .betheader {
      width:66px;
      line-height:15px;
      color:#666;
      float:right;
      text-align:center;
      font-weight:bold;
  }
  
  .seperatebets {
      width:100%;
      height:10px;
      background:white;
  }
  </code></pre>