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 >
  <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

CodePudding user response：

The key to getting the resizable columns to work is setting table-layout: fixed this uses the widths of the first row to set the table column widths. Then, for the truncation to work properly add overflow: hidden to the tds. Making the text readable on hover is the hard part, I opted to use JavaScript to set a title attribute on every td with the elements .innerText this gives the effect you illustrate in your image and you don't need the .listview td:hover style declaration.

document.querySelectorAll('td').forEach(td => td.title = td.innerText)

table.listview {
  background-color: #fcfcfc;
  color: #061616;
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid black;
  margin: 0;
  width: 100%;
  table-layout: fixed;
}

.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;
  overflow: hidden;
}

.listview td:hover {}

<TABLE >
  <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>

CodePudding user response：

A fairly easy solution would be to add max-width and overflow:hidden to your table-cells.

The following snippet contains an example using max-widht:20vw (20% of viewport-size), since that one also scales on smaller displays.

If you add the wanted hover-title-effect it should look like you want it to.

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;
    overflow:hidden;
  max-width: 20vw;
}

.listview td:hover {
  overflow: visible;
  white-space: unset;
}

<TABLE >
  <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>