標記和CSS呈現表格數據

Question

我有以下的「表」：

，我想藍色塊具有特定寬度和黃色塊擴展，以填補空間的其餘部分，基於容器寬度。

我目前的做法是讓每一行的每一塊都浮起來，並給予它們特定的寬度，但是這種方法不具有可伸縮性和不響應性。

你能否爲我想達到的目標提出一個更好的方法？

我也做了一個提琴手，所以你可以玩標記，看看我做了什麼。

http://jsfiddle.net/RickyStam/bG4dA/

下面是我的HTML

<div class="iframe-container"> 
      <div class="content"> 
       <div class="betcontainer"> 
        <p class="bettitle">Match Outcome</p> 
        <div class="betheaderwrap"><span class="betheader">Away</span><span class="betheader">Draw</span><span class="betheader">Home</span></div> 
        <div class="clear"></div> 
        <div><span class="bettext-big">TEAM A v TEAM B</span><span class="bet">3.30</span><span class="bet">3.30</span><span class="bet">2.15</span></div> 
        <div class="clear"></div> 
       </div> 
       <div class="seperatebets"></div> 
       <div class="betcontainer"> 
        <p class="bettitle">Goal</p> 
        <div><span class="bettext-medium">Over 2.5</span><span class="bet">2.05</span><span class="bettext-medium">Over 2.5</span><span class="bet">1.70</span></div> 
        <div class="clear"></div> 
       </div> 
       <div class="betcontainer"> 
        <p class="bettitle">1st Half</p> 
        <div class="betheaderwrap"><span class="betheader">Away</span><span class="betheader">Draw</span><span class="betheader">Home</span></div> 
        <div class="clear"></div> 
        <div><span class="bettext-big">TEAM A v TEAM B</span><span class="bet">3.80</span><span class="bet">2.00</span><span class="bet">2.80</span></div> 
        <div class="clear"></div> 
       </div> 
       <div class="betcontainer"> 
        <p class="bettitle">Half with most goals</p> 
        <div><span class="bettext-xlarge">1st Half</span><span class="bet">3.20</span></div> 
        <div class="clear"></div> 
        <div><span class="bettext-xlarge">2nd Half</span><span class="bet">1.95</span></div> 
        <div class="clear"></div> 
        <div><span class="bettext-xlarge">Draw</span><span class="bet">3.30</span></div> 
        <div class="clear"></div> 
       </div> 
      </div> 
     </div> 

這裏是我的CSS：

.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; 
} 

Answer 1

您可以使用浮動。如果您需要自己的佈局具有響應性，請給予%寬度而不是px。

您需要進行計算，以便每行上每個塊的寬度總和不會超過100％。

然後使用box-sizing:border-box; css屬性，以便每個塊上設置的寬度也包含邊框（有關該屬性的概述，請參閱here）。

下面是一個例子FIDDLE