Превращение таблицы в div с определенной шириной - PullRequest
Новая
       7

Превращение таблицы в div с определенной шириной

1 голос
/ 06 октября 2011

Я хочу составить таблицу рейтингов, которая выглядит как футбольный рейтинг ESPN.Как бы вы превратили этот код в div и lis с определенной шириной?Я просмотрел исходный код, и этот код использует таблицу с классами для четных и нечетных строк.Я был

рейтинги студенческого футбола

Я думал о чем-то вроде этого, но я не знаю, как установить конкретную ширину для различных компонентов (рейтинг и т. д.) 

            <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>

1 Ответ

2 голосов
/ 06 октября 2011

Если честно, я бы согласился с комментариями о том, что табличные данные лучше подавать в таблице.

Но если вы хотите использовать элементы div внутри элементов списка, используйте display: inline-block и overflow: ни один для элементов div не должен сохранять их вертикально выровненными и фиксированной ширины.

дисплей: встроенный блок хорошо поддерживается

Разметка и стиль как: 

<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>

... должен дать вам старт.

enter image description here

...