Key-Value table with overflow wrapping?

Question

Imagine an interface that wants to show Label: Value information:

Notice the important points:

all the captions are right-aligned
all the details are left-aligned

Now for the hard part

As the container (e.g. containing window) is shrunken vertically (or the list becomes very long), I want the HTML rendering engine to be able to "wrap" the Label: Value items to another "column":

Notice again the important points:

all the captions are right-aligned
all the details are left-aligned
text that is too long is cut off and postfixed with ... (ellipses)

Is such a flow layout possible with HTML/CSS?

body {
  background: rgb(245, 249, 253);
  background: linear-gradient(90deg, rgba(245, 249, 253, 1) 0%, rgba(236, 244, 252, 1) 100%);
  font-family: "Segoe UI", sans-serif;
}

tr td:first-child {
  text-align: right;
  color: GrayText;
}

<table>
  <tbody>
    <tr><td>Date taken:</td><td>Specify date and time taken</td>   </tr>
    <tr><td>Tags:</td><td>Add a tag</td></tr>
    <tr><td>Rating:</td><td>✰✰✰✰✰</td></tr>
    <tr><td>Dimensions:</td><td>653 × 640</td></tr>
    <tr><td>Size:</td><td>115 KB</td></tr>
    <tr><td>Title:</td><td>OLYMPUS DIGITAL CAMERA</td></tr>
    <tr><td>Authors:</td><td>Add an author</td></tr>
    <tr><td>Comments:</td><td>Add comments</td></tr>
    <tr><td>Camera maker:</td><td>OLYMPUS CORPORATION</td></tr>
    <tr><td>Camera model:</td><td>C8080WZ</td></tr>
    <tr><td>Subject:</td><td>OLYMPUS DIGITAL DAMERA</td></tr>
    <tr><td>F-stop:</td><td>f/3.5</td></tr>
    <tr><td>Exposure time:</td><td>1/1250 sec.</td></tr>
    <tr><td>ISO speed:</td><td>ISO-100</td></tr>
    <tr><td>Exposure bias:</td><td>0 step</td></tr>
    <tr><td>Focal length:</td><td>36 mm</td></tr>
    <tr><td>Max aperture:</td><td>3.5</td></tr>
    <tr><td>Metering mode:</td><td>Pattern</td></tr>
    <tr><td>Flash modee</td><td>No flash, auto</td></tr>
    <tr><td>Date created:</td><td>4/10/2021 11∶25 ᴀᴍ</td></tr>
    <tr><td>Date modified:</td><td>8/19/2008 18∶53 ᴘᴍ</td></tr>
  </tbody>
</table>

What should happen on mobile? Just like a long list (first screen shot)? And what if the wrapping causes more columns than the screen width? Should it horizontal scroll? Does it have to use table? — Simp4Code, Jul 28 '22 at 14:24
Mobile does not matter. What if wrapping causes more columns that screen width: lets do what Vista does - hide the excess columns (no need to scroll). Does it have to use a table? No, but it is *tabular* data - so probably the easiest starting point. — Ian Boyd, Jul 28 '22 at 14:31

Key-Value table with overflow wrapping?

Now for the hard part

0 Answers0