Set the CSS table to have a width of 100% and ensure that the table data cells have hidden

Question

Set the CSS table to have a width of 100% and ensure that the table data cells have hidden

My table has a 100% width, and some of the td elements have overflow hidden. I want to make their text appear as ellipsis when it's too long.

I can achieve this with fixed td sizes, but I need them to be relative to the content.

This question was first posted 3 years ago on Stack Overflow: CSS: 100% width table, with cells that have hidden overflow and irregular/minimal cell widths

There haven't been any responses yet, so I'm wondering if it's possible now.

Here is an example on jsFiddle: https://jsfiddle.net/gd1fogee/

Below is a snippet:

table{
  width:100%;
}
td{
/*max-width: 150px !important; */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
      padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td>this is a very very long text to show what i want to achieve</td><td>two</td><td>three</td>
  </tr>
</table>
</div>

Thank you in advance for your assistance!

html css html-table overflow

Answer 1

Answer №1

Could this be what you're looking for? Take a look below.

https://jsfiddle.net/Tanikimura/4vypvwcn/

Implement text-overflow on a paragraph tag.

table{
  width:100%;
}
td {
max-width: 150px !important; 

}
td p{

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
      padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td><p>this is a very very long text to show what i want to achieve</p></td><td>two</td><td>three</td>
  </tr>
</table>
</div>

Answer 2

Could this be what you're looking for? Take a look below.

https://jsfiddle.net/Tanikimura/4vypvwcn/

Implement text-overflow on a paragraph tag.

table{
  width:100%;
}
td {
max-width: 150px !important; 

}
td p{

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
      padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td><p>this is a very very long text to show what i want to achieve</p></td><td>two</td><td>three</td>
  </tr>
</table>
</div>

Answer 3

Answer №2

If the content in some columns is too large, it's difficult to size it relative to the content itself. The best approach would be to use the max-width method you selected. You could consider applying a specific class to the columns with larger content to make them more relatively sized. Targeting a particular child td of a tr may be necessary if only a few columns have oversized content. Otherwise, applying max-width to all columns would be the way to go.

Answer 4

If the content in some columns is too large, it's difficult to size it relative to the content itself. The best approach would be to use the max-width method you selected. You could consider applying a specific class to the columns with larger content to make them more relatively sized. Targeting a particular child td of a tr may be necessary if only a few columns have oversized content. Otherwise, applying max-width to all columns would be the way to go.

Answer 5

Answer №3

I'm currently brainstorming a JavaScript solution for this issue, but there's definitely room for improvement. If anyone has any suggestions on how to enhance it, please feel free to share in the comments.

const table = document.getElementsByTagName('table')[0];

shrinkCells(table, .75);

function shrinkCells(tbl, maxWidth) {
  // Check if it fits within the parent
  if (tbl.offsetWidth <= tbl.parentElement.offsetWidth || maxWidth < .2) {
    return tbl;
  }
  // set the maxWidth for every element that is bigger than the current maxwidth
  Array.from(table.getElementsByTagName('td')).forEach(function (el) {
    if (el.offsetWidth > (tbl.offsetWidth * maxWidth))
      el.style.maxWidth = (tbl.offsetWidth * maxWidth) + "px";
  });
  
  shrinkCells(tbl, maxWidth - .05);
}

table{
  width:100%;
  border-collapse: collapse;
}
td{
  border: solid 1px #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td>this is a very very long text to show what i want to achieve asdhudfaslkjdfhdf asdf asdfasdfa asdf asdfasdf asdf a</td><td>two asdf asd fasd fasd fradfsddf asdf asdf asd fdsaf</td><td>three</td>
  </tr>
</table>
</div>

This code was created just for fun. Any feedback on how it can be enhanced would be greatly appreciated.

Answer 6

I'm currently brainstorming a JavaScript solution for this issue, but there's definitely room for improvement. If anyone has any suggestions on how to enhance it, please feel free to share in the comments.

const table = document.getElementsByTagName('table')[0];

shrinkCells(table, .75);

function shrinkCells(tbl, maxWidth) {
  // Check if it fits within the parent
  if (tbl.offsetWidth <= tbl.parentElement.offsetWidth || maxWidth < .2) {
    return tbl;
  }
  // set the maxWidth for every element that is bigger than the current maxwidth
  Array.from(table.getElementsByTagName('td')).forEach(function (el) {
    if (el.offsetWidth > (tbl.offsetWidth * maxWidth))
      el.style.maxWidth = (tbl.offsetWidth * maxWidth) + "px";
  });
  
  shrinkCells(tbl, maxWidth - .05);
}

table{
  width:100%;
  border-collapse: collapse;
}
td{
  border: solid 1px #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td>this is a very very long text to show what i want to achieve asdhudfaslkjdfhdf asdf asdfasdfa asdf asdfasdf asdf a</td><td>two asdf asd fasd fasd fradfsddf asdf asdf asd fdsaf</td><td>three</td>
  </tr>
</table>
</div>

This code was created just for fun. Any feedback on how it can be enhanced would be greatly appreciated.

Answer 7

Answer №4

After extensive trial and error for nearly 5 years, I have yet to discover the perfect solution using tables. However, I did manage to find a workaround by utilizing grid and its auto width columns:

grid-template-columns: repeat(3, auto);

.grid{
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, auto);
}
.grid div{
    /*max-width: 150px !important; */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 3px 5px;
}

<div style="width:400px;display:block;">
  <div class="grid">
    <div>one</div><div>two</div><div>three</div>
    <div>this is a very very long text to show what i want to achieve</div><div>two</div><div>three</div>
  </div>
</div>

Answer 8

After extensive trial and error for nearly 5 years, I have yet to discover the perfect solution using tables. However, I did manage to find a workaround by utilizing grid and its auto width columns:

grid-template-columns: repeat(3, auto);

.grid{
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, auto);
}
.grid div{
    /*max-width: 150px !important; */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 3px 5px;
}

<div style="width:400px;display:block;">
  <div class="grid">
    <div>one</div><div>two</div><div>three</div>
    <div>this is a very very long text to show what i want to achieve</div><div>two</div><div>three</div>
  </div>
</div>

Set the CSS table to have a width of 100% and ensure that the table data cells have hidden

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Django server fails to display the CSS files upon activation

Issue with Selenium WebDriver: Expectation failure while waiting for element visibility at specified location(..)

Ensuring the validity of float and non-empty values in JavaScript

Netlify deployment is failing to display the CSS styling on a website built with Hugo

How to target the following sibling element (not a child) with CSS

Exploring Web Scraping Through Dual System Security

Can you guide me on implementing CSS Houdini in Next.js?

Adjust the vertical alignment in Material UI Grid to allow for proper tab navigation while maintaining the original order

Sort data by checking either multiple or single checkbox options in AngularJS; if none are selected, display all results

Load the listbox with information retrieved from the database

Tips for personalizing the color scheme of Material UI Stepper Step?

Tips for enabling autoplay for videos in Owl Carousel

Can we add to the input field that is currently in focus?

Fade in background color with jquery when scrolling

Styling certain UL and LI elements with CSS properties

The values in my JavaScript don't correspond to the values in my CSS

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

Using a color as a substitute for a background image on mobile devices

What purpose does the div tagged with the class selection_bubble_root serve in Nextjs react?

Using VBA to Populate Dropdown List on Webpage from an iFrame