using ellipsis in table

Question

I have a table that is using an ellipsis but I'm stuck with conflicting arguements. The scenario is a I have a table with a tr tag and 2 td's. I need the first td to be the width of the text ( border-collapse: collapse ) which is fine, BUT, I need the width of the table to be 100% so in the 2nd td I can use the ellipsis. I haven't found a way to to border-collapse the first td and have the 2nd be used as an ellipsis.

http://jsfiddle.net/epywtvjf/2/

   <table>
     <tr>
        <td>This is the first div.
        </td>
        <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
        </td>
      </tr>
      <tr>
        <td>This is the first div.
        </td>
        <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
        </td>
      </tr>
      <tr>
        <td>This is the first div.
        </td>
        <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
        </td>
      </tr>
   </table>

table{
   table-layout: fixed;
   width: 100%;
   border-collapse: collapse;
}

table td{
  white-space: nowrap;
  border: none;
  line-height:unset;
  padding: 0px;
  text-align: left;
}

So you want the first column however wide it needs to be to fit its text, then the second column to just get pushed over, and its contents will be ellipsed if they're too wide? — cjl750, Jun 14 '17 at 14:57

score 2 · Accepted Answer · answered Jun 14 '17 at 15:30

2

You may need to add display flex to your tr. The following css worked for me.

table {
       table-layout: fixed;
       border-collapse: collapse;
       width:100%;
}
tr{
  display: flex; 
}
td{
      white-space: nowrap;
      border: none;
      padding: 0px;
      text-align: left;
      border-collapse: collapse;
}
#td2 {
      overflow:hidden;
      text-overflow: ellipsis;
}

http://jsfiddle.net/krewn/opputmg3/1/

answered Jun 14 '17 at 15:30

kpie

9,588
5
28
50

yes this worked thanks! I didn't even think about flex. – Keith Jun 14 '17 at 15:36

kpie · Answer 2 · 2017-06-14T15:12:08.180

1

You can specify specific css for each individual td by adding a class to the td in the html and then using the . class selector in css.

<table>
         <tr>
            <td class="col1">This is the first div.
            </td>
            <td class="col2">This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
            </td>
          </tr>
</table>


table {
       table-layout: fixed;
       border-collapse: collapse;
       width: 100%;
}
td{
      white-space: nowrap;
      border: none;
      padding: 0px;
      text-align: left;
      border-collapse: collapse;
      overflow: hidden;
}
.col2 {
      text-overflow: ellipsis;
}

http://jsfiddle.net/krewn/qcypz5xk/

edited Jun 14 '17 at 15:12

answered Jun 14 '17 at 15:06

kpie

9,588
5
28
50

What if there are multiple rows? In html id must be unique – Morpheus Jun 14 '17 at 15:09
there will be multiple rows – Keith Jun 14 '17 at 15:09
Why the down-vote? The Op doesn't have multiple rows, regardless you can use class instead of id. – kpie Jun 14 '17 at 15:10
This doesn't solve my problem. I know I can add a class to the 2nd but it needs to have a width to work and since I can't set a width to it, it won't work. – Keith Jun 14 '17 at 15:16

tdmiller · Answer 3 · 2017-06-14T15:10:22.420

0

Changing table-layout: fixed and overflow:hidden? Will that solve your issue? here

edited Jun 14 '17 at 15:10

answered Jun 14 '17 at 14:53

tdmiller

2,102
2
13
28

the first td tag will vary in length depending on text so I can't set a max-width on anything – Keith Jun 14 '17 at 14:54
no because I can't make one column a fixed width, it will always be a percentage of the first – Keith Jun 14 '17 at 15:15

using ellipsis in table

3 Answers3