Сделать ширину ячеек во второй строке таблицы равной ширине ячеек в первой строке таблицы?

Я использую свойство CSS display со значениями table, table-row и table-cell для макета мой документ в виде таблицы.

Обычно (как вы можете видеть в коде) размер ячеек в таблице связан с содержимым, которое содержит (пока мы не предоставим жестко запрограммированные значения измерения.

Но я хочу, чтобы table-cell во втором (и так далее) table-row имели ту же ширину, что и соответствующие table-cell из первого table-row. Таким образом, ширина 1-го table-cell во втором ряду такая же, как у ширина 1-го table-cell в первом table-row. Является ли это возможным?

Я хочу сделать это без добавления свойств pixel margin или padding и т. д. во второй и последующие table-rows. Я просто хочу, чтобы он получил width ячейки над ним.

Итак, в конце концов, ширина столбца будет равна ширине самой широкой ячейки в столбце.

Как я могу это сделать?

Вот скрипка. В коде три строки имеют разные цвета.

КОД:

<div style="display:table;">
    <div style="background-color:#d9a4f4; display:table-row;">
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Inferrable</label>
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Not inferrable</label>
    </div>
    <div style="background-color:#7cbfdd; display:table-row;">
        <input type="radio" name="radio_group1" value="0" style="display:table-cell;">
        <input type="radio" name="radio_group1" value="0" style="display:table-cell;">
        <label style="display:table-cell;">I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. </label>
    </div>
    <div style="background-color:#e8c277; display:table-row;">
        <input type="radio" name="radio_group2" value="0" style="display:table-cell;">
        <input type="radio" name="radio_group2" value="1" style="display:table-cell;">
        <label style="display:table-cell;">I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. </label>
    </div>
</div>

html css html-table
person Solace    schedule 27.08.2014    source источник
comment
аааа! не делай этого. если вы хотите, чтобы они точно совпадали, укажите явно или используйте макет таблицы (кашель)   -  person Daniel A. White    schedule 27.08.2014
comment
Не используйте встроенные стили, определите свои стили в отдельном файле CSS.   -  person Dan    schedule 27.08.2014
comment
у вас неправильное количество ячеек в каждой строке - они должны совпадать, если вы хотите, чтобы они были равны, поскольку в таблице отображения нет таких вещей, как colspan. Поскольку ваши данные выглядят так, как будто их можно классифицировать как табличные, вы должны просто использовать правильную таблицу с th и scopes, установленными для первой строки.   -  person Pete    schedule 27.08.2014
comment
@DanielA.White HTML-таблица исключена, я не могу ее использовать. Проблема с явным width заключается в том, что в первой строке иногда будут слова размером с «Да» и No в качестве меток, а иногда inferrable и Not inferrable. Так, например. если я сделаю это width:150px с учетом Not Inferrable, оно будет слишком широким для слова No   -  person Solace    schedule 27.08.2014
comment
@Pete Если я добавлю третий table-cell в первый table-row, это решит проблему?   -  person Solace    schedule 27.08.2014
comment
@Dan У меня есть несколько причин использовать встроенные стили на данный момент, однако я понимаю важность использования отдельных таблиц стилей. Позже я конвертирую их в таблицы стилей.   -  person Solace    schedule 27.08.2014
comment
это должно сработать, хотя я также не стал бы использовать стиль ячейки таблицы непосредственно для входных данных - возможно, обернуть их в диапазон с прикрепленным к нему стилем ячейки таблицы отображения - jsfiddle.net/coyvacm5   -  person Pete    schedule 27.08.2014
comment
@Пит Спасибо. Дополнительный вопрос: почему бы не использовать стиль непосредственно во входных данных?   -  person Solace    schedule 27.08.2014
comment
Радиокнопки имеют ограниченные стили, которые вы можете применить к ним, поэтому у вас будут разные результаты в зависимости от того, какой браузер вы используете.   -  person Pete    schedule 27.08.2014
comment
@Пит Спасибо. Ваше решение является наиболее подходящим ответом, поэтому, если вы можете написать его как ответ, я приму его. Будет полезно будущим посетителям.   -  person Solace    schedule 27.08.2014

Ответы (2)


arrow_upward
1
arrow_downward

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

<div style="display:table;">
    <div style="background-color:#d9a4f4; display:table-row;">
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Inferrable</label>
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Not inferrable</label> 
        <span style="display:table-cell;"></span>
    </div>
    <div style="background-color:#7cbfdd; display:table-row;">
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group1" value="0" style="display:table-cell;"></span>
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group1" value="0" style="display:table-cell;"></span>
        <label style="display:table-cell;">I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons.</label>
    </div>
    <div style="background-color:#e8c277; display:table-row;">
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group2" value="0" style="display:table-cell;"></span>
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group2" value="1" style="display:table-cell;"></span>
        <label style="display:table-cell;">I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. I am the label for the second group of radio buttons.</label>
    </div>
</div>

Вы должны быть в состоянии достичь того, чего хотите - пример

Заголовки в одну строку вместо переноса

person Pete    schedule 27.08.2014

arrow_upward
1
arrow_downward

Все элементы DIV, label и input полностью разделены, и даже если они установлены на display: table-cell, они не имеют внутренних отношений и не знают об измерениях друг друга.

Вам нужно будет явно определить их ширину, чтобы их ширина совпадала. (Тогда вам больше не нужны display-свойства для них).

Вот демонстрация jsfiddle с изменениями вашего кода:

http://jsfiddle.net/erlingormar/ga1hzrLd/

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

person erlingormar    schedule 27.08.2014
comment
Нет, нет, я ищу, чтобы переключатели располагались под первыми двумя ячейками первой строки (метки inferrable и Not inferrable). - person Solace; 27.08.2014
comment
Проблема с явно заданной шириной заключается в том, что в первой строке иногда могут быть такие маленькие слова, как Yes и No, как labels, а иногда и длинные слова, такие как inferrable и Not inferrable. Так, например. если я сделаю это width:150px с учетом Not Inferrable, оно будет слишком широким для слова No - person Solace; 27.08.2014