表格无法正确显示

Question

我的表格无法正确显示。我一直很难用CSS编写表格，因为它们从来没有像他们应该的那样完美地工作。只需看一下HTML和CSS就可以看到另一组眼睛。

CSS

table .domeSpecs {
    font-size: 16px;
    margin-left: 20px;
    margin-bottom: 20px;
    float: right;
    border: collapse;
    background-image: url("tableback.png") no-repeat right bottom;
    background-size: cover;
}
table .domeSpecs td {
    padding: 0px 5px 0px 5px;
}
table caption {
    font-size: 18px;
    letter-spacing: 5px;
    text-align: center;
    margin-bottom: 10px;
}
table thead {
    border-bottom: 2px solid gray;
    background-image: url("top.jgp") repeat-x top;
}
table thead tr {
    height: 40px;
}
table thead th {
    padding: 0px 5px 0px 5px;
    letter-spacing: 2px;
}
table thead th:first-of-type {
    background-image: url("topleft.jpg") no-repeat left top;
}
table thead th:last-of-type {
    background-image: url("topright.jpg") no-repeat right top;
}
table tfoot {
    border-top: 2px solid gray;
    text-align: center;
    background-image: url("bottom.jpg") repeat-x bottom;
}
table tfoot tr {
    height: 40px;
}
table tfoot td:first-of-type {
    background-image: url("bottomleft.jpg") no-repeat left bottom;
}
table tfoot td:last-of-type {
    background-image: url("bottomright.jpg") no-repeat right bottom;
}
table tbody tr {
    height: 50px;
    border-bottom: 1px dotted gray;
}
table tbody td:first-of-type {
    background-image: url("left.jpg") repeat-y left top;
}
table tbody td:last-of-type {
    background-image: url("right.jpg") repeat-y right top;
}
table tbody tr:nth-of-type(even) {
    background-color: rgba(152, 228, 215, 0.6);
}
table tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.6);
}
table .firstColumn {
    width: 22%;
}
table .middleColumn {
    width: 28%;
}
table .lastColumn {
    22%;
}

HTML

<table class="domeSpecs">
    <caption>
        Building Models
    </caption>
    <colgroup>
        <td class="firstColumn"></td>
        <td colspan="2" class="middleColumn"></td>
        <td class="lastColumn"></td>
    </colgroup>
    <thead>
        <tr>
            <th>Model</th>
            <th>Total Sq. Ft.</th>
            <th>Sphere Size</th>
            <th>Price</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td colspan="2">Call us about custom pricing!</td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Class IA</td>
            <td>4700 square ft.</td>
            <td>50 ft. 5/8 sphere</td>
            <td>$150,000</td>
        </tr>
        <tr>
            <td>Class IB</td>
            <td>4100 square ft.</td>
            <td>35 ft. 5/8 sphere</td>
            <td>$125,000</td>
        </tr>
        <tr>
            <td>Class IIA</td>
            <td>3700 square ft.</td>
            <td>50 ft. 5/8 sphere</td>
            <td>$112,000</td>
        </tr>
        <tr>
            <td>Class IIB</td>
            <td>3100 square ft.</td>
            <td>35 ft. 5/8 sphere</td>
            <td>$97,000</td>
        </tr>
        <tr>
            <td>Class IIIA</td>
            <td>2600 square ft.</td>
            <td>45 ft. 5/8 sphere</td>
            <td>$84,000</td>
        </tr>
        <tr>
            <td>Class IIIB</td>
            <td>2200 square ft.</td>
            <td>35 ft. 5/8 sphere</td>
            <td>$73,000</td>
        </tr>
    </tbody>
</table>