Не удается заставить ячейки таблицы расширяться равномерно

Я пытаюсь получить таблицу, чтобы равномерно распределять каждую ячейку, но не перекрываться при сжатии. Мой КССНе удается заставить ячейки таблицы расширяться равномерно

table.basic { 
    border-collapse: collapse; 
    border: 0px solid black; 
    width: 100%; 
}

и мой HTML является

<table class="basic" style="white-space: nowrap"> 
    <tr> 
    <th>Hex</th> 
    <th>RGB</th> 
    <th>HSL</th> 
    </tr> 
    <tr> 
    <td id="colorhexDIV"></td> 
    <td id="colorrgbDIV"></td> 
    <td id="colorhslDIV"></td> 
    </tr> 
</table>

прямо сейчас они не перекрывают друг друга, но они не в центре

Если добавить , то они сосредоточены, но перекрываются

Я также пытаюсь избежать упаковки, как так

Как центрировать его и удерживать клетки от дублирования?

источник

2016-03-24 SirParselot

Я создал скрипку кода вы предоставили, и я не могу воспроизвести , не могли бы вы подготовить демо? – Blindsyde

@Noctane Я добавил таблицу-макет: привязан к классу table.basic, чтобы заставить их перекрываться и центрироваться. Этот код точно не воспроизводит проблему в точности. – SirParselot

Вы должны удалить white-space: nowrap из вашего HTML, а затем вы можете использовать width: 33%

table.basic { 
 
    border-collapse: collapse; 
 
    border: 0px solid black; 
 
    width: 100%; 
 
} 
 

 
th,td { 
 
    width: 33.3%; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}

<table class="basic"> 
 
    <tr> 
 
    <th>Hex</th> 
 
    <th>RGB</th> 
 
    <th>HSL</th> 
 
    </tr> 
 
    <tr> 
 
    <td id="colorhexDIV">Text</td> 
 
    <td id="colorrgbDIV">Text</td> 
 
    <td id="colorhslDIV">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ex alias nihil minus labore perspiciatis maiores porro quas eius provident expedita, dolore obcaecati officiis consectetur quidem, animi aperiam exercitationem est.</td> 
 
    </tr> 
 
</table>

источник

2016-03-24 17:38:33

Это сработало. Я пробовал это, но, я думаю, я сделал класс неправильным или чем-то еще. Благодаря! – SirParselot

Я только что заметил, что у вас есть 'style =" white-space: nowrap "' в вашем HTML, что является проблемой. Я обновил свой ответ, я думаю, это то, что вы ищете. –

У меня все еще есть это в html, и он отлично работает. Я просто переделал класс для 'td, th', и он отлично работал. У меня был 'tr.basic, td.basic' и изменил его на' .basictr' – SirParselot

Чтобы центрировать содержимое ячейки используют стиль выравнивания текста. style = "text-align: center;" Содержимое таблицы datacell будет расширяться в зависимости от того, что внутри них пытается использовать div или span и устанавливать его на фиксированный размер, поэтому все содержимое имеет одинаковую длину.

источник

2016-03-24 17:41:21 James

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

Вы можете использовать table-layout: fixed, который останавливается в таблице, и это дети от размеров в зависимости от их содержания и установить ширину одного элемента таблицы

источник

2016-03-24 17:42:40

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

Не удается заставить ячейки таблицы расширяться равномерно

ответ

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