html - 清除 span 和 table 之间的间隙

Question

Jsfiddle

我在第一个表格之后添加了一个跨度，但是它没有像我预期的那样工作，表格和跨度之间有一个间隙，并且跨度宽度也不符合第一个表格的宽度

这是跨度的 css:

.tieudecuoi
{
    line-height:24px;
    background-color: #80A5CE;
    text-transform: uppercase;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
    padding-top:0px;
    padding-bottom: 0; 
    width:300px !important;
}

Jsfiddle

Answer 1

它对我有用，就像我在评论中提到的那样，但我只是在 Chrome 中对其进行了测试...

编辑:我稍微改变了方法，我不确定这是否是您可以在您的元素中做的事情，但如果您这样做，它会给您想要的结果。如果这对您可行，请告诉我。

      .tieudecuoi {
        background-color: #80A5CE;
        text-transform: uppercase;
        color: #FFF;
        font-weight: bold;
        font-size: 12px;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0px;
        padding-bottom: 0;
    }
    body {
    }

    table, th, td, tr {
        border-collapse: collapse;
        border: 1px solid;
    }

    .tb {
        width: 500px;
    }

    /*2 cell đầu tiên, xác định độ rộng*/

    .tdkq {
        width: 70%;
        vertical-align: top;
    }

    .tddd {
        width: 30%;
        vertical-align: top;
    }

    /*bảng kết quả và đầu đuôi*/

    .tbkq {
        width: 100%;
        word-wrap: break-word;
        table-layout: fixed;
        float: left;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .tbdd {
        width: 100%;
    }

    /*cột giải và kết quả của bảng kết quả*/

    .trkq {
        width: 100%;
    }

    .thkqgiai {
        width: 20% !important;
    }

    .thkqso {
        width: 80% !important;
    }

    .tdkqgiai {
        text-align: center;
    }

    .tdkqso {
        text-align: center;
        word-wrap: break-word !important;
    }

    /*cột đầu và đuôi của bảng đầu đuôi*/

    .thdddau {
        width: 30%;
    }

    .thddduoi {
        width: 70%;
    }

    /*tiêu đề cho bảng kq*/
    .tieudemien {
        line-height: 24px;
        background-color: #80A5CE;
        text-transform: uppercase;
        color: #FFF;
        font-weight: bold;
        font-size: 12px;
        width: 500px;
        margin-bottom: 0;
        padding-bottom: 0;
    }

<h2 class="tieudemien"> Kết quả xổ số Miền Bắc ngày 02-11-2014</h2>
<table class="tb">
    <tbody>
        <tr>
            <td class="tdkq">
                <table class="tbkq">
                    <tbody>
                        <tr class="trkq">
                            <th class="thkqgiai">Giải</th>
                            <th class="thkqso">BTB</th>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">Đặc biệt</td>
                            <td class="tdkqso">23411</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">Giải nhất</td>
                            <td class="tdkqso">37428</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">Giải nh&#236;</td>
                            <td class="tdkqso">38460-75356</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">Giải ba</td>
                            <td class="tdkqso">02055-66542-36814-52154-66881-20546</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">Giải bốn</td>
                            <td class="tdkqso">6300-7736-6062-3408</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">Giải năm</td>
                            <td class="tdkqso">0235-2078-1344-6340-4550-6337</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">Giải s&#225;u</td>
                            <td class="tdkqso">046-421-944</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">Giải bảy</td>
                            <td class="tdkqso">88-98-24-21</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="tieudecuoi">
                                spadfj lkj lkj lkj lkj lkj lkj lkj lkj lkj lkj lkj lkj lkjn

                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
            <td class="tddd">
                <table class="tbdd">
                    <tbody>
                        <tr class="trkq">
                            <th class="thdddau">Đầu</th>
                            <th class="thddduoi">Đuôi</th>
                        </tr>

                        <tr>
                            <td class="tdkqgiai">0</td>
                            <td class="tdkqso">0,8</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">1</td>
                            <td class="tdkqso">1,4</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">2</td>
                            <td class="tdkqso">8,1,4,1</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">3</td>
                            <td class="tdkqso">6,5,7</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">4</td>
                            <td class="tdkqso">2,6,4,0,6,4</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">5</td>
                            <td class="tdkqso">6,5,4,0</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">6</td>
                            <td class="tdkqso">0,2</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">7</td>
                            <td class="tdkqso">8</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">8</td>
                            <td class="tdkqso">1,8</td>
                        </tr>
                        <tr>
                            <td class="tdkqgiai">9</td>
                            <td class="tdkqso">8</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>

</table>