Встроенное переполнение: скрыто, только частично работает

Проблема: в одном типе встроенного стиля "переполнение: скрытое" работает нормально, а в другом стиле встроенного стиля это не так.

Вот код CSSDesk (jsfiddle не работает с этой записью).

Справочная информация. В моем проекте я должен использовать таблицы HUGE, чтобы отображать переменные, поступающие с db - до 75 переменных на страницу. Я старался изо всех сил использовать divs, но я потратил 20 часов и, в конечном счете, вернулся к столам (для вас, пуристы CSS, я извиняюсь).

В некоторых из моих td данные немного длинны и должны быть "скрыты" (в данном случае это не имеет значения, потому что данные - это просто "предварительный просмотр"). Я обыскал в Интернете и сделал эксперимент, в котором единственным стилистическим элементом, который мог бы использовать "скрытый", является div (я пробовал tds и промежутки в эксперименте, и они не работают).

В одном td я хотел бы поместить одну переменную слева, а другую справа - большую часть времени, оба будут вписываться в td, но на очень длинной переменной это ОК, чтобы отрубить часть правой переменной, Итак, я пишу CSS и html и стилю divs, чтобы они соответствовали моим критериям - это верхние два tds на странице CSSDesk, отмеченные выше. Все работает нормально.

НО! За последние несколько месяцев я узнал, что можно "смешивать" несколько стилей в "классе" части идентификатора элемента (например, <td class="redcolor blueunderline">) и я обнаружил, что во многих случаях это ОЧЕНЬ удобно использовать "маленькие дополнения" для элемента, который является единственным на странице, и вам придется переписать/добавить весь встроенный стиль или изменить таблицу стилей (например, имя, адрес, номер телефона, почтовый индекс и вы просто хотите "вычеркнуть" имя - class="identifers" vs class="identifiers bold") - Интересно, делают ли вы когда-нибудь такие эксперты?

Так что я немного поиграл и получил большую часть работы за EXCEPT для "переполнения: скрытый".

Для верхнего левого div в примере CSSDesk я использую этот CSS и html (он отлично работает):

.leftdivclass {
   float:left;
   background-color:green;
   color:black;   
   border:2px solid yellow;   
   overflow:hidden;
   white-space:nowrap;
   width:25%;}
<td><div class="leftdivclass" >Upper Left 123456789</div>

Для верхнего правого div в примере CSSDesk я использую этот CSS и html (он отлично работает):

.rightdivclass {
   float:right;
   background-color:red;
   color:black;
   border:2px solid yellow;
   overflow:hidden;
   white-space:nowrap;
   width:25%;}
<div class="rightdivclass" >Upper Right 123456789</div></td>

Для нижнего левого div в примере CSSDesk я использую этот CSS и html (все работает, но "скрыто" - отмечайте, что числа торчат)

.floatleft {
    float:left;}
.bgblue {
    background-color:blue;}
.bgred {
    background-color:red;}
.lcwhite {
    color:white;}
.lcblack {
    color:black;}
.border2y {
    border:2px solid yellow;}       
overflowhidden {
    overflow:hidden;}
.wsnowrap {
    white-space:nowrap;}
.width25pc {
    width:25%;}
<td><div class="floatleft bgblue lcblack border2y overflowhidden wsnowrap width25pc">Lower Left 123456789</div>

Но если я использую тот же html и добавляю "style =" overflow: hidden, все работает отлично, как в нижнем правом примере примера CSSDesk.

<div class="floatright bgred lcblack border2y overflowhidden wsnowrap width25pc" style="overflow:hidden;">Lower Right 123456789</div></td>

Вопросов:

1. Почему один встроенный CSS-стиль, содержащий "overflow: hidden", работает, но когда он разбирается с одним добавлением в команду класса, он не работает? И почему это сработает, если я добавлю "style =" overflow: hidden "- inline?

2. Вы когда-нибудь пользовались небольшими "отрывками класса"?

Опять же, я благодарю вас заранее.