Turning table into divs with specific widths_问答_开发者

Turning table into divs with specific widths

开发者 https://www.devze.com 2023-04-10 20:56 出处：网络

I want to make a table for rankings that looks like this ESPN college football ranking. How would you turn this code into divs and lis with specific widths? I did view source and this code uses a tabl

college football rankings

I was thinking of something along the lines of this, but I don't know how to set specific widths for the different components (rank score etc)

            <div id="topRanked">
            <span id="title">Top Ranking</span>
            <div id="headers">

            </div>
  开发者_运维技巧          <ul id="topTen">
                <li class="odd"></li>
                <li class="even"></li>

            </ul>
        </div>

To be honest I would agree with the comments that tabular data is better served in a table.

But if you want to use div's within list elements, then using display:inline-block and overflow:none for the divs should keep them vertically aligned and fixed width.

display:inline-block is well supported

Markup and style like:

<html></html>
<head>
<style type="text/css">
body { font-size: 1em;}
li {list-style:none;}
li.odd {background: #eef; width: 265px; height:20px; overflow:none;}
li.even {background: #fff; width: 265px; height:20px; overflow:none;}
div.rank, div.team, div.record, div.pts, div.rankHead, div.recordHead, div.teamHead, div.ptsHead {display:inline-block; overflow:none; margin-right:1px; padding-top:2px; padding-left: 5px;}
div.rank, div.rankHead {width:25px;}
div.team, div.teamHead {width:100px;}
div.record, div.recordHead {width:75px;}
div.pts, div.ptsHead {width:40px;}
div.rankHead, div.teamHead, div.recordHead, div.ptsHead {background: gray;}
</style>

</head>
<body>
    <div id="topRanked">
        <span id="title">Top Ranking</span>
        <div id="headers">

        </div>
        <ul id="topTen">
            <li class="head"><div class="rankHead">RK</div><div class="teamHead">TEAM</div><div class="recordHead">RECORD</div><div class="ptsHead">PTS</div></li>
            <li class="odd"><div class="rank">1.</div><div class="team">LSU</div><div class="record">5-0</div><div class="pts">1473</div></li>
            <li class="even"><div class="rank">2.</div><div class="team">Alabama</div><div class="record">5-0</div><div class="pts">1435</div></li>
            <li class="odd"><div class="rank">3.</div><div class="team">Oklahoma</div><div class="record">4-0</div><div class="pts">1397</div></li>
            <li class="even"><div class="rank">4.</div><div class="team">Wisconsin</div><div class="record">5-0</div><div class="pts">1266</div></li>
            <li class="odd"><div class="rank">5.</div><div class="team">Boise State</div><div class="record">4-0</div><div class="pts">1248</div></li>
            <li class="even"><div class="rank">6.</div><div class="team">Oklahoma State</div><div class="record">4-0</div><div class="pts">1191</div></li>
            <li class="odd"><div class="rank">7.</div><div class="team">Stanford</div><div class="record">4-0</div><div class="pts">1185</div></li>
            <li class="even"><div class="rank">8.</div><div class="team">Clemson</div><div class="record">4-0</div><div class="pts">1093</div></li>

        </ul>
    </div>
</body>
</html>

... should give you a start.

Turning table into divs with specific widths