Proper table alignment and rowspan

Question

I have the following table:

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>

and css

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

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

}

I want the second and third columns in the second line to be like this.

First Line: Overnight stay with Second line breakfast in (centered) Third line empty (like new line) Fourth single room

And the same for third column. I know my code is for three lines, but it gives me to many borders. I want to have no borders between lines and empty line. How can I fix it?

Here is the FIDDLE

Answer 1

You can do the borders purely in CSS with no HTML changes needed.

Demo Fiddle

Try this 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;
}

For the line separation, you can either play with the widths or use JohnBupits answer above.

Answer 2

I understand you want something like this.

You could just to this using rowspans on the <th> containing Overnight stay with breakfast in, like this:

...
    <thead>
        <tr>    
            <th colspan="3">Special Rates offered to conference participants</th>
        </tr>
        <tr>
            <th rowspan="3">Conference</th>
            <th rowspan="3">Overnight stay with
                <br /> breakfast in
                <br />
                <br />single room
            </th>
            <th rowspan="3">Overnight stay with
                <br /> breakfast in
                <br />
                <br />double room
            </th>
        </tr>
   </thead>
...