Short Version
Run the code snippet below (skip over the code; i would collapse it if i could):
table.listview {
background-color: #fcfcfc;
color: #061616;
white-space: nowrap;
border-collapse: separate;
border-spacing: 0;
border: 1px solid black;
margin: 0;
width: 100%;
}
.listview caption {
text-align: left;
font-family: Georgia, "Times New Roman", serif;
color: DarkGreen;
background: transparent;
padding: 0.375em 0.25em 0.5em 0;
font-variant: small-caps;
}
.listview thead {
background-color: ButtonFace;
}
tr:hover {
background: #E5F3FF;
}
.listview th {
background-color: ButtonFace; /*requird to make sticky work*/
color: black;
font-weight: normal;
border-bottom: 1px solid #d5d5d5;
border-right: 1px solid #dedfe7;
resize: horizontal;
overflow: hidden; /* required to make resize work */
text-align: left;
padding-left: 0.5em;
position: sticky;
top: 0; /* required to make sticky work ( https://stackoverflow.com/a/43707215) */
}
.listview th:hover {
background: #dde9f6;
background: linear-gradient(180deg, #e8f4ff 0%, #e8f4ff 36%, #c0e9ff 36%, #bbe4fd 100%);
border-right: 1px solid #6bb8e6;
border-bottom: 1px solid #99c6e3;
}
.listview td {
padding-left: 0.3em;
text-overflow: ellipsis;
white-space: nowrap;
}
.listview td:hover {
overflow: visible;
white-space: unset;
}<TABLE class="listview">
<CAPTION>Unit Tests</CAPTION>
<THEAD>
<TR>
<TH>Class</TH>
<TH>Method</TH>
<TH>Test result</TH>
<TH>Error</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>highMountain.ToolkitTests</TD>
<TD>testGetSwervingBearings</TD>
<TD>Success</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testgetMilfordTrunnions</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testupdateMilfordTrunnionsTotals</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testlockMilfordTrunnionForMachining</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testfetchHydrocopticMarselvanes</TD>
<TD>Success</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testGetLunawaineShaft</TD>
<TD>Success</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testresumeMachining</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testsavePanametricFanPositions</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testloadPanametricFanPositions</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testgetTurboEncabulatorStatistics</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testgetTurboEncabulatorBaseRunTime</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testgetTurboEncabulatorDuration</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testpauseSinusoidalDepleneration</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testpassSemiboloid</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>teststartSemiboloidSlots</TD>
<TD>Failed</TD>
<TD>Optional[com.microsoft.sqlserver.jdbc.SQLServerException: Invalid column name 'TurboEncabulator'.]</TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>teststopSemiboloidSlots</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testaddSemiboloidSlots</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testGetActiveTremmyPipe</TD>
<TD>Success</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testGetTremmyPipe</TD>
<TD>Failed</TD>
<TD>Optional[java.lang.Exception: Hibernate Session connection does not wrap type: java.sql.Connection]</TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testaddTremmyPipe</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
<TR>
<TD>contoso.grobber.frobberGrob</TD>
<TD>testgetTremmyPipeHasHydrocopticVanesAddedThisPatametricFan</TD>
<TD>No checks performed</TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>Notice how terrible this is:
- the the listview is wider than the screen
- you have to scroll horizontally to see all the columns
- and even though the table header has resize grippers
- they don't work
I want to figure out how to make it work better (i.e. like a ListView)
Long Version
I'm trying to style an HTML table to behave like a listview:
- listview header remains visible (
position: sticky) as you scroll down: complete - text in cells should not nowrap (
white-space: nowrap): complete - overflow text should be replaced with ellipses (
text-overflow: ellipsis): complete? - hovering over cut-off text should reveal it (
td:hover { overflow: visible; white-space: unset;}): complete? - listview is
width: 100%wide: fail - columns are resizable (
resize: horizontal; overflow: hidden;): fails
Except i just can't the important parts to work: narrower columns that are resizable and cut-off long text and replace it with ellipses.
In other words, i want it to look and behave something like this:
Research Effort
- How to achieve text-overflow: ellipsis in a HTML Table with flexible columns
- How to make html table columns resizable?
- CSS text-overflow: ellipsis; not working?
- Cut off text to the last word if longer than table cell width
- How can I make ellipsis work in an HTML table?
- HTML table cut off long text and show full text on hover/click
- Table column text-overflow ellipsis ( width in % )
- CSS text ellipsis and 100 percent width
- CSS text-overflow in a table cell?
- hide certain string of text and replace with ellipsis - show on hover
- How can I allow a CSS table column with width 100% to overflow table?
- CSS Hide overflow text on a table with different width columns
- text-overflow ellipsis implementation in width 100% element
