Question

我有下表：

HTML

<table border="1">
        <thead>
            <tr>    
                <th colspan="3">Special Rates offered to conference participants</th>
            </tr>
            <tr>
                <th rowspan="3">Conference</th>
                <th>Overnight stay with breakfast in </th>
                <th>Overnight stay with breakfast in
                </th>                    
            </tr>
            <tr>
                <th class="no-border"></th>
                <th class="no-border"></th>                    
            </tr>
            <tr>
                <th>single room</th>
                <th>double room</th>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td>Elite City Resort</td>
                <td>58,00 Euros</td>
                <td>75,00 Euros</td>
            </tr>                
        </tbody>
    </table>

和css

table{
    border: 1px solid black;
    border-collapse: collapse;
}

td, tr, th{
    border:1px solid black;

}

我希望第二行中的第二列和第三列是这样的。

第一行：过夜二线早餐（中心）第三行空（如新行）第四单人房

第三栏也是如此。我知道我的代码是三行，但它给了我很多边界。我想在行和空行之间没有边框。我该如何解决？

以下是FIDDLE

Answer 1

您可以完全在CSS中执行边框，而无需更改HTML。

Demo Fiddle

试试这个CSS：

table {
    border: 1px solid black;
    border-collapse: collapse;
}
td, th {
    border:1px solid black;
}
tr th:not([rowspan]){
    border-top:none;
    border-bottom:none;
}

对于行分隔，您可以使用the widths或使用上面的JohnBupits答案。

Answer 2

我知道你想要像this这样的东西。

您可以使用包含<th>的{{1}}上的rowpans来实现此目的，如下所示：

Overnight stay with breakfast in

正确的表格对齐和行距

2 个答案:

Demo Fiddle