Все границы не отображаются на таблице в ie7-совместимом представлении

Question

Не знаю, почему границы отображаются неправильно. Я попробовал:

/* ------ global ------ */

body {
margin: 0 auto;
padding:0 0;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
}


/* ------ Content Wrapper ------ */
#wrapper {
margin: 0 auto;
width:760px;
text-align:left;
}

#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
}

  #content table td {
border:solid 1px black;
 } 

Нужно ли перечислять все свойства границ CSS, чтобы получить границы для всей таблицы, например:

border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
or more ......

Я еще этого не делал, но раньше мне приходилось делать это с некоторыми таблицами, чтобы получить границы со всех сторон для IE7. Это было последнее прибежище, так как я не знал, что еще делать.

Answer 1

Рассмотрим , следующий за jsFiddle , который правильно работает в IE7, показывая сплошную черную рамку 1 пиксель в ячейках таблицы.

Я не изменил ваш код, но добавил правило, включающее границы для ячеек заголовка таблицы table th, а также ячеек данных таблицы table td.

HTML:

<div id="content">
    <table>
        <tr>
            <th scope="col">Column</th>
            <th scope="col">Column</th>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </table>
</div>

CSS:

#content table {
    font-size: 0.8em;
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}

#content table th,
#content table td {
    border: solid 1px black;
    padding: 5px 10px;
}

Если в ячейках вашей таблицы все еще нет границ, возможно, в вашей таблице стилей есть одно или несколько правил, которые появятся позже & mdash; или иметь больше CSS Specificity & mdash; которые переопределяют ваши стили.

Answer 2

применить border-collapse: свернуть таблицу, это надо исправить:)

Answer 3

Попробуйте использовать border-collapse: отделитесь для IE7 следующим образом:

#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
*border-collapse:separate;
}