Nano Hash - криптовалюты, майнинг, программирование

Проблемы с заполнением ячеек таблицы в Chrome

У меня много проблем с заполнением ячеек таблицы в Chrome. Кажется, что если ячейка таблицы не содержит чистого текста, то отступ вообще не применяется.

Моя разметка:

<table>
        <tr>
            <th></th>
            <th class="account-picture"></th>
            <th class="account-name">Name</th>
            <th class="account-email">Email</th>
            <th class="account-last">Last Sign in</th>
        </tr>

        <tr>
            <td>
                <fieldset>
                   <ul>        
                       <li><input type="checkbox" id="enabled" name="test[]" value="enabled"></li>
                   </ul>    
                </fieldset>
            </td>

            <td class="account-picture">
                   <div class="online">
                      <img src="http://www.genengnews.com/app_themes/genconnect/images/default_profile.jpg">                           </div>
            </td>
            <td class="account-name">test test test test test test test test test test test test test test test test test test</td>
            <td class="account-email">test test test test test test test test test test test test test test test test test test</td>
            <td class="account-last">15 April 2012 10:19 AM</td>
        </tr>
</table>

CSS:

img{ 
    height: 42px;
    width: 42px;
}

td, th{      
    padding: 0 12px;
    vertical-align: middle;
}

.account-picture{
    width: 40px;

}

.account-name{
    min-width: 100px;
}

.account-email{
    min-width: 120px;
}

.account-last{
    min-width: 140px;
}

table{
    table-layout: fixed;
    float: none;
    width: 100%;
    margin-top: 10px;
 }

td, th{      
   word-wrap: break-word;
   padding: 0 12px;
   vertical-align: middle;
}

td:first-child, th:first-child{
  width: 14px;
}

И скрипка: http://jsfiddle.net/5mPFk/1/

И вот что он отображает, как в Firefox 11: введите здесь описание изображения

Chrome: 18 (последняя версия): введите здесь описание изображения

IE9: введите здесь описание изображения

Как видно, IE и FF работают нормально, а вот с хромом нет. Почему это происходит и какие возможные решения для этого?


  • Может быть, это поможет закрыть ваш элемент input: <input ... />, хотя мне кажется странным, если Chrome не справится с этим изящно... (то же самое касается вашего элемента img, кстати) 15.04.2012
  • Все еще вижу ту же проблему с закрытым элементом ввода. Хотя я не думаю, что необходимо закрывать входной тег при использовании типа документа HTML5. 15.04.2012

Ответы:


1

Удалил table-layout: fixed и вроде работает.

Если будет использоваться table-layout: fixed, то для определения ширины столбца следует использовать width вместо min-width.

Не уверен, почему только Chrome подыгрывал, но, возможно, у него лучшая реализация стандартов.

15.04.2012
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..