Markup and CSS to present Table Data

Question

I have the following "Table" :

enter image description here

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.

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.

Can you please suggest me a better approach for what i want to achieve?

I have also made a fiddler so you can play with the markup and see what i did.

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

Below is my 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>

Here is my 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;
}

web-tiki · Accepted Answer · 2014-03-26T10:00:28.540

0

You can use floats. If you need your layout to be responsive, give % width instead of px.

You will need to calculate so that the sum of width of every block on each row doesn't exeed 100%.

Then use box-sizing:border-box; css property so that the width set on each block also contains the border (see here for an overview of that property).

Here is an example FIDDLE

edited Mar 26 '14 at 10:00

answered Mar 26 '14 at 09:51

web-tiki

99,765
32
217
249

thanks for your response i have thought about using percentages but the problem is that the width of the container will change often and i can't be sure that each row wont'e exceed 100% width. I could use javascript to do the calculation but it's something i want to avoid if there is a pure CSS solution – Ricky Stam Mar 26 '14 at 10:02
Yep it does, silly me i should have thought it earlier! Thanks anyway for the help :) – Ricky Stam Mar 26 '14 at 10:36

Markup and CSS to present Table Data

1 Answers1