Scaling The Last Column In A Table (with Input) To Match The Container

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:

<td> Series <br> Manual Sizing </td>

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 <td> 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%; } <div id="dummy" >text to show where a graph would be</div> <hr> Manual visualization <table class="details"> <tr> <td> Series <br> Manual Sizing </td> <td> RSquared <br> 0.98765432 </td> <td> Description <br> <input id="seriesDetail" type="text" readonly value="[1,23],[2,20],[4,20],[8,21],[16,23],[32,22],[64,26],[128,28],[256,41],[512,55],[1024,81],[2048,136],[4096,244],[8192,474],[16384,959],[32768,1987],[65536,3613],[131072,6957],[262144,14250],[524288,28215],[1048576,55882],[2097152,116210],[3145728,175000],[4194304,229976],[5242880,291501],[6291456,347649],[7340032,399349],[8388608,485512]"> </td> </tr> </table>

I've dropped the <label> 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; } <table class="details"> <tr> <td> Series <br> <span>Manual Sizing</span> </td> <td> RSquared <br> <span>0.98765432</span> </td> <td> Description <br> <input id="seriesDetail" type="text" readonly value="[1,23],[2,20],[4,20],[8,21],[16,23],[32,22],[64,26],[128,28],[256,41],[512,55],[1024,81],[2048,136],[4096,244],[8192,474],[16384,959],[32768,1987],[65536,3613],[131072,6957],[262144,14250],[524288,28215],[1048576,55882],[2097152,116210],[3145728,175000],[4194304,229976],[5242880,291501],[6291456,347649],[7340032,399349],[8388608,485512]"> </td> </tr> </table>

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

<table> <thead> <tr> <th>Series</th> <th>RSquared</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Manual Sizing</td> <td>0.98765432</td> <td>data...</td> </tr> </tbody> </table>

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.