HTML CSS 表格行重叠答案

【问题标题】：HTML CSS table lines overlapsHTML CSS 表格行重叠
【发布时间】：2013-12-25 10:21:14
【问题描述】：

代码如下：

<div class="timetable" class="table">
    <table border="1">
        <tr class="ura">
            <th class="ura-ura"><span>1.1</span></th>
            <th class="ura-predmet"><span>1.2</span></th>
            <th class="ura-ucilnica"><span>1.3</span></th>
        </tr>

        <tr class="ura-nadomescanje">  
             <th class="ura-nadomescanje-ura"><span>2.1</span></th>
             <th class="ura-nadomescanje-predmet"><span>2.2</span></th>
             <th class="ura-nadomescanje-ucilnica"><span>2.3</span></th>
             <th class="ura-nadomescanje-profesor"><span>2.4</span></th>
        </tr>

        <tr class="ura">
             <th class="ura-ura"><span>3.1</span></th>
             <th class="ura-predmet"><span>3.2</span></th>
             <th class="ura-ucilnica"><span>3.3</span></th>
        </tr>

    </table>
</div>

和 CSS（使用这些代码）： http://jsfiddle.net/AV38G/10/

我想在表格中有 3 行，但同一类的行重叠。我不知道为什么。

我想要的： 1.1 1.2.... 2.1 2.2... 3.1 3.2...

但我总是得到： 3.1 3.2... 2.1 2.2...

我猜第三行写在第一行上。但我不知道如何解决它。

【问题讨论】：

在 Fiddle 中看起来不错 1.1 1.2 1.3 ... 你能更好地解释一下你想要实现什么吗？
你的 HTML 和 CSS 需要做很多改变

标签： html css html-table overlap

【解决方案1】：

您的表格有错误的单元格定义，您应该使用 TD 而不是 TH 您也不需要每个单元格的所有样式尝试这样做：

    <table border="1">
        <tr class="ura">
            <td class="ura">1.1</td>
            <td class="predmet">1.2</td>
            <td class="ucilnica">1.3</td>
            <td class="profesor"></td>
        </tr>
        <tr class="nadomescanje">  
            <td class="ura">2.1</td>
            <td class="predmet">2.2</td>
            <td class="ucilnica">2.3</td>
            <td class="profesor">2.4</td>
        </tr>
        <tr class="ura">
            <td class="ura">3.1</td>
            <td class="predmet">3.2</td>
            <td class="ucilnica">3.3</td>
            <td class="profesor"></td>
        </tr>
    </table>

使用更简单的样式表（没有所有宽度错误）

table {
    font-family: roboto, sans-serif;
    width:100%;
}
tr {
    width: 100%;
    height: 70px;
}
td {
    height: 70px;
    color: #7f8c8d;
    background-color: #ecebeb;
    padding:5px;
    vertical-align:middle;
    text-align:center;
}
tr.ura td.ura {
    background-color: #53ccea;
}
tr.nadomescanje td.ura {
    background-color: #e74c3c;
}
td.ura {
    color: #fff;
    font-weight: lighter;
    font-size: 2rem;
    text-align: left;
}
td.ucilnica {
    font-size: 1.2rem;
}
td.predmet  {
    font-weight: 600;
    font-size: 1.5rem;
}
td.profesor {
    font-weight: lighter;
    font-style: italic;
}

【讨论】：

【解决方案2】：

这是一个updated fiddle，带有工作的 HTML 和 CSS。您可能需要调整一些间距，但它基本上完成了另一个应该做的事情。

我使用 div 元素重写了您的 html，并大大简化了您的 CSS，这在许多地方都是多余的。你应该尽量避免

position: absolute;

在可能的情况下。

【讨论】：

【解决方案3】：

您需要从行类中删除 position: absolute

【讨论】：

我需要删除所有 position:absolute 吗？因为现在我看起来很丑
就在元素上。所以.ura 和.ura-nadomescanje。