Tips for styling cells in a certain column of an ng-repeat table

Question

Tips for styling cells in a certain column of an ng-repeat table

I am currently facing an issue with a table I have created where the last column is overflowing off the page. Despite being just one line of text, it extends beyond the right edge of the page without being visible or scrollable. The table is built using the semantic ui framework.

Is there a way to contain the text within the limits of each cell in only the last column? It's tricky because I am using ng-repeat to generate the table data.

I attempted to solve this by adding

ng-style="overflow:scroll; max-width:300px"

to my <td></td> elements, but this caused every cell in the table to become scrollable and overflowed.

<table class="ui left aligned red table"
                ng-show="ishowError">
                <thead>
                    <tr>
                        <th ng-repeat="head in headers"
                            ng-bind="ifixHeader(headers[$index])"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        ng-repeat="nfo in allError | filter:dashFilter">
                        <td ng-repeat="head in headers"
                            ng-bind="nfo[headers[$index]]">
                            </td>
                    </tr>
                </tbody>
            </table>

javascript html css angularjs semantic-ui

Answer 1

Answer №1

Have you considered utilizing the 'last-child' selector in your CSS? You can try adding this snippet to your stylesheet:

    tr td:last-child{
          overflow:scroll;
          max-width:300px;
    }

I hope this solution proves beneficial for your needs.

Answer 2

Have you considered utilizing the 'last-child' selector in your CSS? You can try adding this snippet to your stylesheet:

    tr td:last-child{
          overflow:scroll;
          max-width:300px;
    }

I hope this solution proves beneficial for your needs.

Tips for styling cells in a certain column of an ng-repeat table

Answer №1

Similar questions

Identifying the moment when attention shifts away from an element

Retrieve the API array index by checking the value of the 'Name' field

End event in NodeJS response does not activate

Is there a way to extract the number from a b tag using selenium with Python?

Establish an HttpOnly cookie using JavaScript

Using jQuery and AJAX to fetch the return value of a PHP class method

Issue: It is necessary to utilize the `@babel/plugin-transform-runtime` plugin if you have set `babelHelpers` to "runtime" when using npm link

Moving data of a row from one table to another in Laravel by triggering a button click

Stop header background image from loading on mobile browsers by utilizing the <picture> tag

I'm working on separating the functionality to edit and delete entries on my CRM model, but I'm having trouble finding a way to connect these buttons with my data fields

Angular-jasmine: conducting tests on a component that utilizes timeout to render the DOM

md-datepicker requiring user input

I am encountering an issue where the msal-browser login process seems to be frozen at the callback

Solving the Color Change Mystery in Your Dash Application

Automating web tasks through Excel VBA with SeleniumBasic has been a game-changer for me. However, I am facing

Tips for ensuring a consistent highlight for an active link in Bootstrap

Unable to Update the Status Code

The Angular Google Maps Directive zooms in too much after the "place_changed" event has fired

Making HTTP requests with axios in Node.js based on multiple conditions

Instead of using a checkmark, consider using step numbers with Mui Stepper's Completed StepIcon