CSS table cell alignment and ellipsis not working - html

Question

I have some HTML code that is not hidden and cut off using the CSS ellipsis.
I have tried many things to fix this issue, but nothing works for me (and it is killing me I cannot fix such a simple issue). I have read all the SO posts about the CSS ellipsis.
Here is a visual representation of what I have:
As shown the 11/2001 (2 annees, 10 mois) is dropped to the next line and the ellipsis does not take effect.
I am trying to keep the 11/2001 (2 annees, 10 mois) next to the prompt Date d'achevement and to be cut off (hidden) with the ellipsis if the value is too long, as it is in this case.
Here is my HTML
<div id="live_preview" class="livePreview_resumeWrapper1">
<div class="resumeStyleWrapper25">
<div class="resumeStyleOptimisedContainer25">
<div class="resumeStyleStandardHeadings25">Emploi Détails d'histoire</div>
</div>
<div class="resumeStyleWrapper25">
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardContainer25">
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardLabels25">employeur</div>
<div class="resumeStyleStandardLabelContent25">french</div>
</div>
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardLabels25">Date de demarrage</div>
<div class="resumeStyleStandardLabels25">
<div class="resumeStyleDateStartContent25">01/2009</div>
<div class="resumeStyleFinishDateLabel25">Date d'achevement</div>
<div class="resumeStyleDateFinishContent25">
<div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my CSS
.livePreview_resumeWrapper1 {
border: 1px solid #000;
box-shadow: 10px 10px 5px 0px #888888;
direction: ltr;
padding: 20px;
width: 93%;
}
.resumeStyleWrapper25 {
border-spacing: 0px 0px;
display: table;
font-family: verdana;
font-size: 12px;
width: 100%;
}
.resumeStyleOptimisedContainer25 {
/* THIS CLASS ALTERNATES BETWEEN A ROW AND A NON-ROW DEPENDING ON THE STYLE REQUIREMENTS */
background-color: #000;
display: table-cell;
font-weight: bold;
min-width: 149px;
padding: 2px;
text-transform: uppercase;
vertical-align: top;
width: 18%;
}
.resumeStyleStandardHeadings25 {
background-color: #000;
color: #fff;
display: table-cell;
font-weight: bold;
min-width: 149px;
padding: 2px;
text-transform: uppercase;
vertical-align: top;
width: 18%;
}
.resumeStyleStandardContainer25 {
padding-left: 5px;
width: 100%;
}
.resumeStyleStandardTableRow25 {
display: table-row;
}
.resumeStyleStandardLabels25 {
direction: ltr;
display: table-cell;
font-weight: bold;
height: 100%;
min-height: 25px;
overflow: hidden;
padding: 2px;
padding-right: 10px;
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.resumeStyleDateStartContent25 {
direction: ltr;
display: table-cell;
float: left;
padding: 2px;
text-align: left;
vertical-align: top;
width: 20%;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resumeStyleFinishDateLabel25 {
background-color: #fff;
color: #000;
direction: ltr;
display: table-cell;
float: left;
font-weight: bold;
padding: 2px;
padding-right: 10px;
text-align: left;
vertical-align: top;
}
.resumeStyleDateFinishContent25 {
direction: ltr;
display: table-cell;
float: left;
padding: 2px;
text-align: left;
vertical-align: top;
}
Can anyone point out what I am doing incorrectly?
EDIT
I have updated the HTML & CSS as requested in the comments.

Answer 1

There is a problem of the CSS table structure, you have some table cells stay directly under the element that is also set to table cell, which is invalid. You can wrapped the inner table cell elements into a container and set it as display:table, which would fix the issue.
It's this part:
<div class="table">
<div class="resumeStyleStandardLabelContent25">
<div class="ellipsis">01/2009 Date d'achevement</div>
</div>
<div class="resumeStyleStandardLabelContent25">
<div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
</div>
</div>
In general the correct CSS table layout is like this, but row isn't needed if there is only one row.
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
...
When you use CSS text-overflow:ellipsis in table, it needs to work with fixed table layout, and has width value set, either fixed or percentage are both fine.
It's like this:
.table {
display: table;
width: 100%;
table-layout: fixed;
}
Lastly:
Remove all the float properties from the table cells, they don't work together.
Here is the updated code snippet:
body {width: 500px;} /*for demo only*/
.livePreview_resumeWrapper1 {
border: 1px solid #000;
box-shadow: 10px 10px 5px 0px #888888;
direction: ltr;
padding: 20px;
width: 93%;
}
.resumeStyleWrapper25 {
border-spacing: 0px 0px;
display: table;
font-family: verdana;
font-size: 12px;
width: 100%;
}
.resumeStyleOptimisedContainer25 {
/* THIS CLASS ALTERNATES BETWEEN A ROW AND A NON-ROW DEPENDING ON THE STYLE REQUIREMENTS */
background-color: #000;
display: table-cell;
font-weight: bold;
min-width: 149px;
padding: 2px;
text-transform: uppercase;
vertical-align: top;
width: 18%;
}
.resumeStyleStandardHeadings25 {
background-color: #000;
color: #fff;
display: table-cell;
font-weight: bold;
min-width: 149px;
padding: 2px;
text-transform: uppercase;
vertical-align: top;
width: 18%;
}
.resumeStyleStandardContainer25 {
padding-left: 5px;
width: 100%;
}
.resumeStyleStandardTableRow25 {
display: table-row;
}
.resumeStyleStandardLabels25 {
direction: ltr;
display: table-cell;
font-weight: bold;
height: 100%;
min-height: 25px;
overflow: hidden;
padding: 2px;
padding-right: 10px;
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.resumeStyleDateStartContent25 {
direction: ltr;
display: table-cell;
/* float: left; */
padding: 2px;
text-align: left;
vertical-align: top;
width: 20%;
}
.table {
display: table;
width: 100%;
table-layout: fixed;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resumeStyleFinishDateLabel25 {
background-color: #fff;
color: #000;
direction: ltr;
display: table-cell;
/* float: left; */
font-weight: bold;
padding: 2px;
padding-right: 10px;
text-align: left;
vertical-align: top;
}
.resumeStyleDateFinishContent25 {
direction: ltr;
display: table-cell;
/* float: left; */
padding: 2px;
text-align: left;
vertical-align: top;
}
<div id="live_preview" class="livePreview_resumeWrapper1">
<div class="resumeStyleWrapper25">
<div class="resumeStyleOptimisedContainer25">
<div class="resumeStyleStandardHeadings25">Emploi Détails d'histoire</div>
</div>
<div class="resumeStyleWrapper25">
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardContainer25">
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardLabels25">employeur</div>
<div class="resumeStyleStandardLabelContent25">french</div>
</div>
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardLabels25">Date de demarrage</div>
<div class="resumeStyleStandardLabelContent25">
<div class="table">
<div class="resumeStyleStandardLabelContent25">
<div class="ellipsis">01/2009 Date d'achevement</div>
</div>
<div class="resumeStyleStandardLabelContent25">
<div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or, view the JsFiddle demo, so you can resize the frame easily to check:
Working Demo Here