Ошибка ширины таблицы, html css

Я сделал таблицу, в которой не заполняется полная ширина родительского div в CHROME & SAFARI.Ошибка ширины таблицы, html css

Это прекрасно работает в Firefox, но я хотел бы работать во всех браузерах.

После некоторых взглядов на здесь я обнаружил, что в некоторых случаях хрома может быть исправлен с установкой родительского DIV на ...

display: block; width: 100%;

.. но проблема не исчезла.

Также найден еще один случай с парой, где указание поля не указано & отступы, так что у него был снимок и все еще есть проблемы с отображением в Chrome & Safari.

HTML-

<div class='player_box info_pic_2'> 
    <div style='display: block; width: 100%;'> 
     <table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; top: 0; right: 0px; height: 30px;'> 
       <tr class='border_bottom'> 
        <td>CELL A</td> 
        <td>CELL B</td> 
       </tr> 
     </table> 
     <table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; right: 0px; top: 30px;'> 
      <tr class='border_bottom'> 
       <td>ROW A </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW B </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW C </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW D </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW E </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW F </td> 
      </tr> 
     </table> 
    </div> 
</div>

CSS

tr.border_bottom td { 
    border-bottom:1pt solid black; 
} 
.info_pic_2 { 
    position: absolute;; 
    height: 250px; 
    top: 130px; 
    right: 70px; 
    width: 350px; 
    max-width: 100%; 
    display: block; 
    border-style:solid; 
    border-width:5px; 
    color: black; 
} 
.player_box { 
    border:solid 4px #000000; 
    -moz-border-radius-topleft: 33px; 
    -moz-border-radius-topright:32px; 
    -moz-border-radius-bottomleft:32px; 
    -moz-border-radius-bottomright:32px; 
    -webkit-border-top-left-radius:33px; 
    -webkit-border-top-right-radius:32px; 
    -webkit-border-bottom-left-radius:32px; 
    -webkit-border-bottom-right-radius:32px; 
    border-top-left-radius:33px; 
    border-top-right-radius:32px; 
    border-bottom-left-radius:32px; 
    border-bottom-right-radius:32px; 
    text-align:center; background:#575757; 
    padding:100px 50px 100px 50px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    opacity: 0.8; 
}

источник

2013-05-31 Hush Pro

Я добавил JSFiddle для этого: http://jsfiddle.net/rcQmW/ –

Ваш вопрос, как представляется, быть padding значения в вашем селекторе .player_box (второй последней строки на вашем CSS Удалите прокладку и она заполнится правильно.

источник

2013-05-31 23:14:37

ничего себе. спасибо, я не могу поверить, что пропустил это. Приветствую! –

Ха не беспокоится! Просто полезный намек тоже, я стараюсь как можно больше держать стиль в css. Гораздо легче отследить эти мелочи, когда я смотрю в одном месте! Плюс это облегчает людям, находящимся на SO, помочь здесь. –

я могу заставить его вести себя лучше, изменив этот CSS:

.info_pic_2 { 
    position: absolute; 
    height: 250px; 
    top: 130px; 
    right: 70px; 
    width: 350px; 
    max-width: 100%; 
    display: block; 
    border-style: solid; 
    border-width: 5px; 
    color: black; 
}

к:

.info_pic_2 { 
    height: 250px; 
    top: 130px; 
    right: 70px; 
    max-width: 100%; 
    display: block; 
    border-style: solid; 
    border-width: 5px; 
    color: black; 
}

Я обнаружил, что смешивание абсолютного позиционирования и процентной ширины - это кошмар.

Edit: Обивка не помогает, но видеть мою обновленную версию здесь:

http://jsfiddle.net/rcQmW/2/

источник

2013-05-31 23:14:19

Привет, не помогло с этим делом, обнаружил, что у меня есть значения заполнения в # player_box css, которые вызывают проблему. Спасибо за вашу помощь –

Ошибка ширины таблицы, html css

ответ

Смежные вопросы