CODEWITHSUNDEEP
csscss-tables
Keith
Keith

Reputation: 4147

using ellipsis in table

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;
}

Upvotes: 1

Views: 1098

Answers (3)

kpie
kpie

Reputation: 11100

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/

Upvotes: 2

kpie
kpie

Reputation: 11100

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/

Upvotes: 1

tdmiller
tdmiller

Reputation: 2192

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

Upvotes: 0

Related Questions