HTML,CSS及；PHP跨浏览器样式

我是一个自学成才的程序员，通常我能自己解决问题，但这是一个顽固的问题。我正在为我的朋友重新设计一个网站，我已经成功地编写了他的网站的移动版，但是桌面版很难

该网站是一个数据库，用于家庭酒吧，跟踪；饮酒者，镜头，单位和标签。索引页面是一个排行榜，列出了饮酒者和最后购买的饮料。我的问题是将饮酒者排在排行榜的前列，以便跨多个web浏览器工作

应该是这样的：（截图）

交替背景是我愿意放弃的东西，如果它能使回声结果更容易

我试过使用表格、div、ul/li。。我使用的示例：

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

克里斯·克拉克森
382.73
单位
613
镜头

---

但结果是一团糟，有人能帮忙吗？

在我看来，绝对应该使用table来完成这项工作

至于显示交替颜色，您可能希望使用n-child（）伪类将背景色应用于tr

JSFIDDLE:

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

/* 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;
}

---

定义大混乱。在<代码> UL<代码>的中间不能有<代码> H2 < /代码>。

ul

只能包含

li

s

cellpadding

、

cellspacting

、

width

、

align

等，因为HTML中的属性不推荐使用CSS进行布局。此外，如果HTML表是用于布局而不是用于数据表，则也不推荐使用。请查看此处：）首先在table@SDC为什么你认为这不是表格数据？他的标记当然不太理想（忽略无效的标记），但表在这里是完全合适的。一个人应该是一排，而不是两排。如果不希望这样，可以通过修改相关元素的显示属性来重新设置表的格式。不要仅仅因为希望字体更大就使用h2。这很好！非常有帮助，但在这上面加上边界半径是很棘手的，对吗？顺便说一句，谢谢你！！棘手，但并非不可能。它可能需要使用一些：first-child伪类和：nth-child（1）。有关：nth-child（）以及如何使用它的信息，请查看w3schools。