CODEWITHSUNDEEP
javascripthtmlhtml-tableexpandable
ssstev
ssstev

Reputation: 1

one of the columns in my table is a short paragraph, if it's too long it needs to be abbreviated and expandable with just css js no jquery

logic: If comment exists and not enough room → display comment with abbreviation "..." and a new dropdown button that extends row on click.

Not sure how this logic could be achieved, searches return js libraries instead. Complete newbie :(

Currently when there's too much text in one section the entire row becomes vertically wider. The html code is nothing fancy with no js:

'''

    <thead class="thead-dark">
        <tr>
            <th class = "time_header">Time</th>
            <th class = "date_header">Date</th>
            <th class = "type_header">Type</th>
            <th class = "value Header">Value</th>
            <th class = "comment_header">Comment</th>
        </tr>
    </thead>

    <tbody>
        {{#each userHistoryData}}
        <tr>
            <td>{{convert2Time this.date}}</td>
            <td>{{convert2Date this.date}}</td>
            <td>{{this.type}}</td>
            <td>{{this.value}}</td>
            <td>{{this.comment}}</td>
        </tr>
        {{/each}}
    </tbody>

</table>
'''

Upvotes: 0

Views: 270

Answers (1)

Crystal
Crystal

Reputation: 1992

Maybe you can truncate the text by doing something like this so you have an idea. then call the max-width on media screen so they fit on the size you want. Let me know if this is the one you mean. This is the example only since I dont have all your code

td {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

td:hover {
  white-space:break-spaces;
  overflow:visible;
}
  
@media only screen and (max-wdith:768px){
  td {max-width: 300px;}
  }
  
@media only screen and (max-wdith:680px){    
td {max-width: 100px;}
}
<table>
    <thead class="thead-dark">
        <tr>
            <th class = "time_header">Time</th>
            <th class = "date_header">Date</th>
            <th class = "type_header">Type</th>
            <th class = "value Header">Value</th>
            <th class = "comment_header">Comment</th>
        </tr>
    </thead>

    <tbody>
        {{#each userHistoryData}}
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>THIS is just a sample comment and I want it to fit on my table THIS is just a sample comment and I want it to fit on my tableTHIS is just a sample comment and I want it to fit on my table THIS is just a sample comment and I want it to fit on my table</td>
        </tr>
        {{/each}}
    </tbody>

</table>

Upvotes: 0

Related Questions