Scaling the last column in a table (with input) to match the container

I recently ran in to a problem with the presentation of data related to a graph. Each series of data has values that define the 'curve'. There can be a lot of these values, and I decided that there was not enough space in the 'legend' to include all the details for the curve. I decided to have a 'details' area, and users could select a curve/series, and the details would be displayed in an area under the graph. This is because there would otherwise be too much data to show in the legend.

The details consist of 4 items, a colour "patch", a series name, the series accuracy, and the data points in the series. A table is what I chose to display these values in.

I want the details area to occupy the base of the screen underneath the graph, and to grow/shrink as the chart grows/shrinks. The last column in the table, the data points, are the largest part of the data, and would 'flood' the area. I want to make it possible to select all the data, but not necessarily make it all visible, a scrolling system would be fine.

In essence, I have this:

What I want reviewed in this question, though, is just the dynamic nature of the 4-column, 1-row table at the bottom, this:

Although the table scales well when the screen-size changes, I believe there must be a better way to implement it.

Here is my extraction of the relevant code, with some test data:



.container {
width: 80%;
margin: 0 auto;
border: 2px solid black;
}

#dummy {
width: 100%;
background-color: lightgreen;
}

.details {
width: 100%;
border-collapse: collapse;
}

.details td {
border: 1px black solid;
padding: 3px;
}

.details td:last-child {
width: 100%;
background-color: lightblue;
padding-right: 7px;
}

.details td:last-child input {
width: 100%;
}
` text to show where a graph would be


Manual visualization




Series



RSquared



Descriptio

The 7px padding issue can be solved by adding box-sizing: border-box to the input. That'll make the input's 100% width include the input's border and padding.

As for using a read-only input, I'd say that's a fine solution - at least for the data. Besides scrolling without requiring a scrollbar, it also let's you use a select all command, without it selecting the entire page.

The series name and r2 stuff doesn't need to be labels and inputs, though. They can be spans if you want to style their values, but basically I'd suggest something like this:

  Series
  
  Manual Sizing

The trick, then, is to add the following to .details td:

width: 1%;
white-space: nowrap;

This will prevent the text wrapping on the space in "Manual Sizing", but the explicit break tag is still respected. And, because the cell is set to 1% width (or some other low, low value), it'll shrink to its smallest size, leaving more room for the data.

Again, if you use spans to separately style name and value within the two cells, you can apply the nowrap rule to the spans alone, while the 1% width can remain on the enclosing ` to squish it.

In the end I get:



#dummy {
width: 100%;
background-color: lightgreen;
}

.details {
width: 100%;
border-collapse: collapse;
}

.details td {
border: 1px black solid;
padding: 3px;
width: 1%;
white-space: nowrap;
}

.details td:last-child {
width: 100%;
background-color: lightblue;
}

.details td:last-child input {
box-sizing: border-box;
width: 100%;
}
text to show where a graph would be



Manual visualization




Series


Manual Sizing


RSquared


0.98765432


Description









I've dropped the tag for the data input, but that's just me.

Lastly, the readonly attribute doesn't need to have a value; it just needs to be "mentioned", so to speak. It's presence is its value. Giving it a value is fine too, of course. Just thought I'd mention it.

The downside of squishing the cells is of course that the layout will shift a little for different content. E.g. a longer series name will push things around.

Again, if you use a span, you can add something like this to limit its size:

display: inline-block; /* allows the span to respect a max-width */
max-width: 100px; /* or something */
overflow: hidden;
text-overflow: ellipsis;

That'll truncate the text to fit 100px (e.g. you'd get "Manual S…" or something).

The gotcha is that the text-overflow literally chops off some of the text, so it's no longer selectable. On my screen the snippet below shows the series name as "Manual…", while selecting it and copying only copies "Manual" (leaving out both the truncated text, and the ellipsis that replaced it).



.details {
width: 100%;
border-collapse: collapse;
}

.details td {
border: 1px black solid;
padding: 3px;
width: 1%;
white-space: nowrap;
}

.details td:last-child {
width: 100%;
background-color: lightblue;
}

.details td:last-child input {
box-sizing: border-box;
width: 100%;
}

.details td span {
display: inline-block;
max-width: 64px;
overflow: hidden;
text-overflow: ellipsis;
}



Series


Manual Sizing


RSquared


0.98765432


Description









Edit: Thinking about it some more, you probably should go for having a separate table header section:

  
    
      Series
      RSquared
      Description
    
  
  
    
      Manual Sizing
      0.98765432
      data...
    
  

It's more semantically correct, and it also gives you better opportunities to apply styling without requiring extra span` elements or classes or what have you.

Depending on your setup, you could even add all the series as rows, and simply hide/show them as needed.

StackExchange Code Review Q#86466, answer score: 5