Почему эта таблица ведет себя так?

Question

Отъезд fiddle.

Это основной CSS из td:

td { 
    height: 30px; 
    border: 1px solid grey; 
    background-color: rgb(141, 176, 248); 
} 

Существует одна ячейка с 30px изображения. Но тем не менее, эта ячейка имеет ширину 600 пикселей. Кто-нибудь понимает, почему?

Answer 1

Имеет отношение к td с содержанием и td без содержания.

Whenever your td doesn't have any fixed width 

Поскольку ваша таблица имеет width:100%, и нет никакого содержания в большинстве из ТД, следовательно, они присоединяются к незначительной ширине. Но как только вы дадите контент любому из td, весь этот столбец будет расширяться, чтобы разместить всю ширину таблицы.

Чтобы проверить это, просто напишите слово в любом другом td, и вся колонка будет расширена.

Что вы должны сделать, чтобы обеспечить ширину в вашу TDs ограничить расширение этого по умолчанию»

.ui-droppable 
{ 
    width:50px; 
} 

Answer 2

Вы устанавливаете ширину/высоту в 30px и 1px границу вокруг. Изображение также имеет ширину 30 пикселей. К сожалению, ширина границы должна быть включена в ширину. Вы должны установить ширину 30+2*1px: fiddle

Answer 3

Если вы не установите любую ширину к <td> элементу и ваш <table> не имеет какую-либо ширину (так по умолчанию 100%) в <td> -s автоматически заполняет всю ширину , В вашем случае это один <td>, который расширяется.

установить ширину в файле css, и проблема должна быть исправлена.

td { width:30px; } 

Очевидно, вы должны установить ширину таблицы независимо от общего количества всех столбцов. Или вы можете установить ширину таблицы в px /% и ширину столбцов в%. Или вы можете использовать javascript/jQuery, чтобы ширина столбцов соответствовала ширине изображения внутри него.