将表格转换为具有特定宽度的div

发布于 2024-12-08 10:50:00 字数 616 浏览 0 评论 0原文

我想制作一个类似于 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>

原文

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 table with classes for even and odd rows. I was

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鸩远一方 2024-12-15 10:50:00

老实说，我同意表格数据最好在表格中提供的评论。

但是，如果您想在列表元素中使用 div，那么对 div 使用 display:inline-block 和 Overflow:none 应该使它们保持垂直对齐和固定宽度。

display:inline-block 得到很好的支持

标记和样式如下：

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

... 应该给出你一个开始。

在此处输入图像描述

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.

enter image description here

回复收藏 0 原文

~没有更多了~