HTML、CSS 和 PHP 跨浏览器样式

Question

我是一名自学成才的程序员，通常我可以自己解决问题，但这是一个固执的问题。我正在为我的朋友重新设计一个网站，并且我已经成功编写了他网站的移动版本，但事实证明桌面版本很困难。

该网站是一个主页酒吧的数据库，跟踪；饮酒者、射击、单位和标签。索引页面是一个排行榜，上面有饮酒者和最后的饮品。我的问题是将饮酒者排名定位在排行榜上以跨多个网络浏览器工作。

它应该看起来像这样：（截图）

http://giblets-grave.co.uk/previews/1400x900_GG-desktop_design_final.jpg

如果交替背景使回显结果更容易，我愿意放弃。

我尝试过使用表格、div、ul/li's .. 我使用的示例：

<table cellpadding="0" cellspacing="0">
<col width="85px" />
<col width="65px" />
<col width="65px" />
   <tr>
      <th colspan="3" align="left">Chris Clarkson</th>
   </tr>
   <tr>
      <td>
         <div class="crop round-five body-shadow" >
            <img src="uploads/1.jpg" class="" />
         </div>
      </td>
      <td>
         <ul><h2>382.73</h2><li>units</li></ul><br />
      </td>
      <td>
         <ul><h2>613</h2><li>shots</li></ul><br />
      </td>
   </tr>
</table>

但它只是一团糟，有人可以帮忙吗？

Answer 1

在我看来，绝对应该使用 table 来做到这一点。

至于显示交替颜色，您可能希望使用 nth-child() 伪类为 tr 应用背景颜色。

JSFIDDLE： http://jsfiddle.net/XYh7f/

HTML：

<div class="container">
<div class="leaderboard">
<table id="main">
    <tr>
        <td>Leaderboard</td>
    </tr>
    <tr>
        <td>
            <table class="client">
                <tr> 
                    <th colspan="3">Chris Clarkson</th>
                </tr>
                <tr>
                    <td>IMG</td>
                    <td>267.26 units</td>
                    <td>457 shots</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="client">
                <tr> 
                    <th colspan="3">Chris Clarkson</th>
                </tr>
                <tr>
                    <td>IMG</td>
                    <td>267.26 units</td>
                    <td>457 shots</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</div>
<div class="drinks">
    <table id="main-data">
        <tr>
            <td class="data-title"><h2>Last Drinks Served</h2></td>
        </tr>
        <tr>
            <table class="data">
                <tr>
                    <td class="data-time">Time</td>
                    <td class="data-shots">Shots</td>
                    <td class="data-drink">Drink</td>
                    <td class="data-drinker">Drinker</td>
                    <td class="data-date">Date</td>
                </tr>
                <tr>
                    <td class="data-time">Time</td>
                    <td class="data-shots">Shots</td>
                    <td class="data-drink">Drink</td>
                    <td class="data-drinker">Drinker</td>
                    <td class="data-date">Date</td>
                </tr>
                <tr>
                    <td class="data-time">Time</td>
                    <td class="data-shots">Shots</td>
                    <td class="data-drink">Drink</td>
                    <td class="data-drinker">Drinker</td>
                    <td class="data-date">Date</td>
                </tr>
            </table>
        </tr>
    </table>
</div>
</div><!-- END CONTAINER -->

CSS：

/* CONTAINER STYLES */
.container {
    width: 960px;
}

.leaderboard {
    float: left;
}

.drinks { 
    float: left;
}

/* LEADER BOARD STYLES */
table {
    color: #eee;
    width: 200px;
    background: none;
}

tr { background: none; }
td { background: none; }

#main {
    text-align: center;
}

#main tr:nth-child(odd) {
    background: #444;
}

#main tr:nth-child(even) {
    background: #555;
}

#main tr td .client tr {
    background: none;
}

/* LAST DRINKS SERVED STYLES */

#main-data {
    width: 740px;
}

#main-data tr:nth-child(odd) {
    background: #444;
}

.data {
    width: 740px;
}

.data tr:nth-child(odd) {
    background: #222;
}

.data td {
    border-right: 1px solid #000;
}

.data tr:nth-child(even) {
    background: #333;
}

.data-title {
    padding: 0 0 0 60px;
}

.data-time {
    text-align: right;
    width: 120px;
}

.data-shots {
    text-align: right;
    width: 60px;
}

.data-drink {
    text-align: center;
    width: 240px;
}

.data-drinker {
    text-align: left;
    width: 200px;
}

.data-date {
    width: 140px;
}