0

I am making a table which can have cells with long strings. To make things fit I am trying to use the overflow:hidden and overflow-text:ellipse styles to hide the long texts. At first I was thinking I was doing something wrong, but now I am noticing that none of the overflow features work with any table elements, but work just as expected with <div> elements. I've worked mostly around this by placing a <div> in each cell, but this is awkward...

Is there a way to get overflow to work with <td> elements, or do I need to put <div> elements in my td's to get them to work with overflow?

here is a JSfiddle showing tables with and without division around or within the elements giving the desired behavior as well as a table without divisions showing what I am talking about.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
jeffpkamp
  • 2,732
  • 2
  • 27
  • 51
  • Perhaps post a live demo of your issue and/or check out: https://stackoverflow.com/questions/10372369/why-doesnt-css-ellipsis-work-in-table-cell – rishijd Mar 05 '18 at 00:13
  • The solutions you can take are mentioned in the above SO page – rishijd Mar 05 '18 at 00:24
  • I tried all of the examples in the referred question and none of them worked. I'm avoiding fixed width because I am trying to keep it adjustable. I put an example in that you can play with showing what works and doesn't. – jeffpkamp Mar 05 '18 at 00:51

3 Answers3

1

As mentioned above 

table { table-layout: fixed; }

should solve the problem but I guess it doesn't for you if you don't want the table elements to wrap.

I read up on resize and noted they are not very suitable for tables:

https://www.w3schools.com/cssref/css3_pr_resize.asp

However, when using a fixed table-layout this problem seems to be resolved.

The closest I could get to a solution for you was this:

https://jsfiddle.net/yc076du3/64/

However the problems with this:

  1. The resize doesn't work unless I apply the fixed table layout as explained above.

  2. I had to use a max-width for cells so they don't get too long.

I would say my answer here isn't really a final answer to your question, but some research to say that your current solution seems to work the best, unless you use workarounds like a fixed table layout but you then deal with automatic cell widths (another set of issues that doesn't match your "working" div layout).

I hope this helps. Please share if you find a better solution.

rishijd
  • 1,294
  • 4
  • 15
  • 32
0

For you https://jsfiddle.net/yc076du3/22/

table{
   table-layout: fixed;
}

If u try understand how it's work...

read this: https://www.w3.org/TR/css-tables-3/#table-layout-algorithm

and this: https://www.w3.org/TR/css-tables-3/#style-overrides

Vladimir Razumnyak
  • 56
  • 4
-1

Have you tried to enclose all your <td> elements in one div?

<div>
    <td></td>
    <td></td>
</div>

Maybe this works for you.

Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
M.ario
  • 1
  • 1