Top City Comparisons Widget

by ritcheyer

HTML

<!-- 
   Do not include this top-level <div> as it is the <div>
   that is created by the widget file
-->
<div id="HomeValueComparisons">
    <div class="commonSearches">
        <h2><span>Top City Comparisons for Home Values</span></h2>
        <div class="content">
            <table class="summaryTable">
                <thead>
                    <tr>
                        <th colspan="3">Most Commonly Searched Cities</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Cities in the United States</th>
                        <th>Average Listing Prices</th>
                        <th>Median Sales Prices</th>
                    </tr>
                    <tr>
                        <th><a href="#" title="City, State">City, State</a></th>
                        <td>$xxx,xxx</td>
                        <td>$xxx,xxx</td>
                    </tr>
                    <tr>
                        <th><a href="#" title="City, State">City, State</a></th>
                        <td>$xxx,xxx</td>
                        <td>$xxx,xxx</td>
                    </tr>
                    <tr>
                        <th><a href="#" title="City, State">City, State</a></th>
                        <td>$xxx,xxx</td>
                        <td>$xxx,xxx</td>
                    </tr>
                    <tr>
                        <th><a href="#" title="City, State">City, State</a></th>
                        <td>$xxx,xxx</td>
                        <td>$xxx,xxx</td>
                    </tr>
                    <tr>
                        <th><a href="#" title="City, State">City, State</a></th>
                        <td>$xxx,xxx</td>
                        <td>$xxx,xxx</td>
                    </tr>
                    <tr>
                        <th><a href="#" title="City, State">City, State</a></th>
                        <td>$xxx,xxx</td>
                       ...

CSS

/*
    DO NOT INCLUDE ANY OF THIS CSS.
    It will be included via real-estate-listings.css
*/
.commonSearches .content {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    background-color: #ededee;
    border-top: 1px solid #ddddde;
    border-bottom: 1px solid #ddddde;
}
.commonSearches table {
   width: 610px;
    margin: auto;
    background-color: #ccc;
}
.commonSearches th,
.commonSearches td { text-align: right; }
.commonSearches th:first-child,
.commonSearches td:first-child { text-align: left; }
.commonSearches th,
.commonSearches td { border: 0; }
.commonSearches td { border-left: 1px dashed #e0e1e1; }
.commonSearches thead {
    background-color: #ededee;
    color: #5a5b5d;
}
.commonSearches thead th {
    padding: 10px 15px;
    font-weight: bold;
    color: #5a5b5d;
}
.commonSearches tbody th,
.commonSearches tbody td {
    width: auto;
    margin: 0;
    padding: 5px 15px;
    background-color: #fff;
}
.commonSearches tbody tr:first-child th {
    color: #231f20;
    background-color: #dfe8ec;
    border-left: 1px dashed #e0e1e1;
}
.commonSearches tbody tr:first-child th:first-child {
    width: 280px;
    border-left: 0;
}