Использование ширины автоматического включения ячейки таблицы в HTML и CSS

У меня есть таблица с 4-мя колоннами 3 из них имеют фиксированную ширину и 1 имеет ширину автомобиля. В настоящий момент это не означает, что строка соответствует всему контейнеру таблицы.

Вот как это должно работать: http://jsfiddle.net/05ky1xfx/4/

должны охватывать остальную часть строки таблицы, и это не есть что-то я должен настроить, чтобы это произошло, так что width: auto; охватывает ряд?

Благодаря

источник

2014-10-10 mdixon18

Я не ясно, что вы просите. Кажется, ваш jsfiddle работает. На самом деле [вам даже не нужна 'width: auto'] (http://jsfiddle.net/05ky1xfx/8/). Что случилось? – showdev

О, я вижу вашу живую страницу в вашей истории изменений. На '' ''' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' на '' '' '' '' '' '' '' '' '' '' '' 'на' 'style.css line: 1711' и' style.css line: 1716'. – showdev

я был в состоянии исправить таблицу, удалив display:block из <tbody> и <tr>.

Применение display:block изменяет эти элементы на элементы блока, а не на элементы таблицы, и прерывает поток таблицы.

Вот изменения, которые я сделал:

style.css линия: 1711

.forum-table, .forum-table > tbody { 
    /*display: block;*/ 
    width: 100%; 
}

style.css линия: 1716

.forum-table > tbody > tr { 
    position: relative; 
    /*display: block;*/ 
    width: 100%; 
    padding: 25px; 
    background: rgba(0, 0, 0, 0.25); 
}

Кроме того, вы не необходимо width:auto на <td>:

style.css линия: 1732

.forum-table > tbody > tr > td.forum-name { 
    /*width: auto;*/ 
}

Вот DEMONSTRATION (jsfiddle).

Я не включил все ваши ресурсы, поэтому некоторые вещи (например, изображения, javascript) были разбиты. Но макет таблицы в вопросе остается неповрежденным.

источник

2014-10-10 22:07:34 showdev

Преобразование Пиксели в Percents

Одно хорошее простое решение, которое является стандарт используется для преобразования веб-сайтов на основе пиксельных для чувствительных конструкций процентов заключается в использовании набор формулу для преобразования ширины пикселя их процентов эквивалента.

Формула: Результаты целевой контекст ÷ = Результаты х 100 = процент окончательного

Целью является размер пикселя элемента, который нуждается в преобразовании:

Формула.

Контекст - размер пикселя вашего сайта.

Так что ваши формулы будут:

Первый сотовый: 52px ÷ 1170px = 0,044 х 100 = 4,44%

Последняя Cell: 250px ÷ 1170px = 0,1236 х100 = 21,36%

Теперь вы можете скрывать все размеры ваших ячеек до процентов за последовательные, надежные результаты. Таким образом, размеры вашей ячейки будут 4,44% для ячейки 1, 59,20% для ячейки 2, 15% для ячейки 3 и 21,36% для ячейки 4.

Примечание: Если для преобразования требуются точные измерения, чем использование более десятичных знаков ,

Вот простой в использовании онлайн-калькулятора: http://rwdcalc.com/

Хороший обзор для преобразования пиксельных каркасов в проценты: http://www.awmcreative.com/css/creating-a-flexible-grid-from-pixels-to-percentages/

источник

2014-10-10 22:15:11 Talkingrock

Это выглядит лучше: http://jsfiddle.net/05ky1xfx/19/ – Anthony

Это хорошее решение, потому что оно использует процентную ширину и не полагается на все различные браузеры/устройства, которые пытаются точно вычислить пиксели, проценты и авто все в одной таблице. – Talkingrock

Да, вы не можете ожидать, что что-то будет относительной шириной для других статических ширин и всегда должно быть пропорциональным. – Anthony

Использование ширины автоматического включения ячейки таблицы в HTML и CSS

ответ

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