Can we create a table-like layout where columns expand based on whitespace and display ellipses if text overflows?

Question

Can we create a table-like layout where columns expand based on whitespace and display ellipses if text overflows?

For the past 3 days, I've been struggling to implement a table design that our UX designer is requesting.

The challenge is to create a table with N columns, where the first N-1 columns align to the left of the screen and the last column aligns to the right. Each column should adjust its width based on the largest element in its rows, with a consistent 24px spacing between columns. As the screen size decreases and white space becomes limited, text overflow should be displayed as ellipses while ensuring the table does not overflow off the screen.

I have tried various solutions found online and even experimented with chatbot suggestions, but none have fully met the requirements.

When using table layout fixed, the text does not expand to fill available white space; table layout auto expands text but fails to display ellipses for overflowing text. Wrapping content with specific width settings did not produce the desired result.

Another attempt with grid-template-columns resulted in the screen shrinking from left to right instead of utilizing the space between the N-1 and N columns.

The intended look on larger screens:

|Column A  | |Column B| |Column C          |                                              |Column D|
|----------| |--------| |------------------| -------------------------------------------- |--------|
| Cell 1234| |Cell 2  | |Cell 5            |                                              |Cell 6  | 
| Cell 3   | |Cell 4  | |Cell 5555555555555|                                              |Cell 6  |

Intermediate screen appearance:

|Column A  | |Column B| |Column C          |     |Column D|
|----------| |--------| |------------------| --- |--------|
| Cell 1234| |Cell 2  | |Cell 5            |     |Cell 6  | 
| Cell 3   | |Cell 4  | |Cell 5555555555555|     |Cell 6  |

On small screens:

|Column A  | |Column B| |Column C | |Column D|
|----------| |--------| |---------| |--------|
| Cell 1234| |Cell 2  | |Cell 5   | |Cell 6  | 
| Cell 3   | |Cell 4  | |Cell 5...| |Cell 6  |

And further minimized:

|Column A | |Column B| |Column C | |Column D|
|---------| |--------| |---------| |--------|
| Cell 1..| |Cell 2  | |Cell 5   | |Cell 6  | 
| Cell 3  | |Cell 4  | |Cell 5...| |Cell 6  |

Is it possible to achieve this desired behavior?

html css responsive

Answer 1

Answer №1

I may have come up with a possible solution using grid.

This involves manipulating the actual grid positioning of elements and utilizing the minmax property.

While it may not address your question directly, it could provide you with a helpful starting point.

#grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: minmax(50px, auto) minmax(50px, auto) minmax(50px, auto) minmax(24px, 1fr) minmax(50px, auto);
  gap: 24px;
  width: 100%;
  height: 100%;
}

#grid>div {
  min-height: 100px;
}

#grid>div span {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#div1 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: rgba(134, 224, 208, 0.5);
  justify-self: start;
}

#div2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: rgba(152, 79, 175, 0.5);
  justify-self: start;
}

#div3 {
  grid-area: 1 / 3 / 2 / 4;
  background-color: rgba(44, 184, 77, 0.5);
  justify-self: start;
}

#div4 {
  grid-area: 1 / 5 / 2 / 6;
  background-color: rgba(196, 154, 3, 0.5);
  justify-self: start;
}

#div5 {
  grid-area: 2 / 1 / 3 / 2;
  background-color: rgba(82, 17, 37, 0.5);
  justify-self: start;
}
  
#div6 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: rgba(249, 154, 182, 0.5);
  justify-self: start;
}

#div7 {
  grid-area: 2 / 3 / 3 / 4;
  background-color: rgba(144, 252, 111, 0.5);
  justify-self: start;
}

#div8 {
  grid-area: 2 / 5 / 3 / 6;
  background-color: rgba(254, 14, 250, 0.5);
  justify-self: start;
}

#div9 {
  grid-area: 3 / 1 / 4 / 2;
  background-color: rgba(224, 23, 19, 0.5);
  justify-self: start;
}

#div10 {
  grid-area: 3 / 2 / 4 / 3;
  background-color: rgba(75, 240, 154, 0.5);
  justify-self: start;
}

#div11 {
  grid-area: 3 / 3 / 4 / 4;
  background-color: rgba(249, 8, 188, 0.5);
  justify-self: start;
}

#div12 {
  grid-area: 3 / 5 / 4 / 6;
  background-color: rgba(155, 205, 226, 0.5);
  justify-self: start;
}

@media (max-width: 768px) {
  #grid {
    grid-template-columns: minmax(50px, auto) minmax(50px, auto) minmax(50px, auto) minmax(24px, 24px) minmax(50px, auto);
  }
  #grid>div {
    justify-self: stretch;
  }
}

<div id="grid">
  <div id="div1"><span>div1div1div1div1</span></div>
  <div id="div2"><span>div2div2div2div2</span></div>
  <div id="div3"><span>div3div3div3div3</span></div>
  <div id="div4"><span>div4div4div4div4</span></div>
  <div id="div5"><span>div5div5div5div5</span></div>
  <div id="div6"><span>div6div6div6div6</span></div>
  <div id="div7"><span>div7div7div7div7</span></div>
  <div id="div8"><span>div8div8div8div8</span></div>
  <div id="div9"><span>div9div9div9div9</span></div>
  <div id="div10"><span>div10div10div10div10</span></div>
  <div id="div11"><span>div11div11div11div11</span></div>
  <div id="div12"><span>div12div12div12div12</span></div>
</div>

Experiment with viewing on a "small screen," where small is defined as 768px, to observe how it appears. You can also adjust the definition of the 4th column based on your needs.

Answer 2

I may have come up with a possible solution using grid.

This involves manipulating the actual grid positioning of elements and utilizing the minmax property.

While it may not address your question directly, it could provide you with a helpful starting point.

#grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: minmax(50px, auto) minmax(50px, auto) minmax(50px, auto) minmax(24px, 1fr) minmax(50px, auto);
  gap: 24px;
  width: 100%;
  height: 100%;
}

#grid>div {
  min-height: 100px;
}

#grid>div span {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#div1 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: rgba(134, 224, 208, 0.5);
  justify-self: start;
}

#div2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: rgba(152, 79, 175, 0.5);
  justify-self: start;
}

#div3 {
  grid-area: 1 / 3 / 2 / 4;
  background-color: rgba(44, 184, 77, 0.5);
  justify-self: start;
}

#div4 {
  grid-area: 1 / 5 / 2 / 6;
  background-color: rgba(196, 154, 3, 0.5);
  justify-self: start;
}

#div5 {
  grid-area: 2 / 1 / 3 / 2;
  background-color: rgba(82, 17, 37, 0.5);
  justify-self: start;
}
  
#div6 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: rgba(249, 154, 182, 0.5);
  justify-self: start;
}

#div7 {
  grid-area: 2 / 3 / 3 / 4;
  background-color: rgba(144, 252, 111, 0.5);
  justify-self: start;
}

#div8 {
  grid-area: 2 / 5 / 3 / 6;
  background-color: rgba(254, 14, 250, 0.5);
  justify-self: start;
}

#div9 {
  grid-area: 3 / 1 / 4 / 2;
  background-color: rgba(224, 23, 19, 0.5);
  justify-self: start;
}

#div10 {
  grid-area: 3 / 2 / 4 / 3;
  background-color: rgba(75, 240, 154, 0.5);
  justify-self: start;
}

#div11 {
  grid-area: 3 / 3 / 4 / 4;
  background-color: rgba(249, 8, 188, 0.5);
  justify-self: start;
}

#div12 {
  grid-area: 3 / 5 / 4 / 6;
  background-color: rgba(155, 205, 226, 0.5);
  justify-self: start;
}

@media (max-width: 768px) {
  #grid {
    grid-template-columns: minmax(50px, auto) minmax(50px, auto) minmax(50px, auto) minmax(24px, 24px) minmax(50px, auto);
  }
  #grid>div {
    justify-self: stretch;
  }
}

<div id="grid">
  <div id="div1"><span>div1div1div1div1</span></div>
  <div id="div2"><span>div2div2div2div2</span></div>
  <div id="div3"><span>div3div3div3div3</span></div>
  <div id="div4"><span>div4div4div4div4</span></div>
  <div id="div5"><span>div5div5div5div5</span></div>
  <div id="div6"><span>div6div6div6div6</span></div>
  <div id="div7"><span>div7div7div7div7</span></div>
  <div id="div8"><span>div8div8div8div8</span></div>
  <div id="div9"><span>div9div9div9div9</span></div>
  <div id="div10"><span>div10div10div10div10</span></div>
  <div id="div11"><span>div11div11div11div11</span></div>
  <div id="div12"><span>div12div12div12div12</span></div>
</div>

Experiment with viewing on a "small screen," where small is defined as 768px, to observe how it appears. You can also adjust the definition of the 4th column based on your needs.

Can we create a table-like layout where columns expand based on whitespace and display ellipses if text overflows?

Answer №1

Similar questions

Return to home page

Issue with multiplication and division when chaining calculations on click

Tips for displaying an image larger than its container using CSS or Bootstrap

Trigger an event prior to the loading of a div

Retrieve a variable from list using FreeMarker within a loop that is chosen from a table

Issue with vertical alignment within nested divs

Seeking guidance on embedding an HTML page within PHP code

React-Toastify revolutionizes the way styles are broken

Steps for transferring a checked statement from an HTML document to a JavaScript file

Is there a way to create an animation for changing .text in response to an on click event?

The configuration of flexDirection seems to be making images vanish

Looking for assistance with jQuery mouseover or hover functionality

Show the entered user data in a separate Div when the button is clicked

What is the process for extracting HTML code from a URL in a web browser?

Tips for highlighting text in a textarea using jQuery or JavaScript

How to prevent page refresh when hitting enter in jQuery form?

Effortlessly Achieving Full Height Section Scrolling in Vue3

Positioning Data Labels Outside of Pie or Doughnut Charts in Chart.js

retrieve the selected option from the dropdown menu. (slightly challenging)

How can I align a single button to the left side while positioning the rest of the elements to the right in Bootstrap 4?