Concealing and wrapping text using CSS in a table structure

Question

Concealing and wrapping text using CSS in a table structure

My table is displayed below:

<table style="width: 100%; white-space: nowrap; overflow: hidden;">
    <tbody><tr>
        <th>
            Department
        </th>
        <th>
            Function
        </th>
        <th>
            Process
        </th>
        <th style="max-width: 75px;">
            Procedure
        </th>
        <th>
        </th>
    </tr>
        <tr>
            <td>Legal Process</td>
            <td>Setup and Maintenance</td>
            <td>New placement scrub</td>
            <td>Review of newly placed accounts for missing or incorrect information before collection efforts</td>

            <td align="center"><a href="/MasterList/Details/1">Details</a></td>
        </tr>...

...

The current display of the table is causing some issues with really long Procedure names extending off the page. I would like to implement a solution where text that exceeds cell width gets hidden, particularly for the Procedures column.

I prefer to only set width constraints on the Procedures to address this issue without any additional CSS modifications beyond what's provided in the asp.net MVC4 starter template.

html css

Answer 1

Answer №1

If you add a specific class to each "procedure" column (as well as the header), it can help streamline the text:

 <tr>
   <td>Litigation Support</td>
   <td>Admin Mailroom &amp; Doc Production</td>
   <td>Oregon debtor exam</td>
   <td class="proc">Debtor exam forwarded to court for issuing</td>

   <td align="center"><a href="/MasterList/Details/8">Details</a></td>
 </tr>

This is how you can control the length of the text within the designated class:

.proc {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.proc {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

<table style="width: 100%; white-space: nowrap; overflow: hidden;">
  <tbody>
    <tr>
      <th>
        Department
      </th>
      <th>
        Function
      </th>
      <th>
        Process
      </th>
      <th class="proc">
        Procedure
      </th>
      <th>
      </th>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Setup and Maintenance</td>
      <td>New placement scrub</td>
      <td class="proc">Review of newly placed accounts before collection efforts begin</td>

      <td align="center"><a href="/MasterList/Details/1">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Setup and Maintenance</td>
      <td>685 Queue/ Midland chargeoff balance issue</td>
      <td class="proc">Review and correction of Midland account balances</td>

      <td align="center"><a href="/MasterList/Details/2">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Skip Trace</td>
      <td class="proc">Re-Serve Request CA</td>

      <td align="center"><a href="/MasterList/Details/3">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Skip Trace</td>
      <td class="proc">Re-serve Request ID</td>

      <td align="center"><a href="/MasterList/Details/4">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Suit Referral</td>
      <td class="proc">Barclays Suit Referral</td>

      <td align="center"><a href="/MasterList/Details/5">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Suit Referral</td>
      <td class="proc">Capital One CRS Procedure</td>

      <td align="center"><a href="/MasterList/Details/6">Details</a></td>
    </tr>

  </tbody>
</table>

Answer 2

If you add a specific class to each "procedure" column (as well as the header), it can help streamline the text:

 <tr>
   <td>Litigation Support</td>
   <td>Admin Mailroom &amp; Doc Production</td>
   <td>Oregon debtor exam</td>
   <td class="proc">Debtor exam forwarded to court for issuing</td>

   <td align="center"><a href="/MasterList/Details/8">Details</a></td>
 </tr>

This is how you can control the length of the text within the designated class:

.proc {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.proc {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

<table style="width: 100%; white-space: nowrap; overflow: hidden;">
  <tbody>
    <tr>
      <th>
        Department
      </th>
      <th>
        Function
      </th>
      <th>
        Process
      </th>
      <th class="proc">
        Procedure
      </th>
      <th>
      </th>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Setup and Maintenance</td>
      <td>New placement scrub</td>
      <td class="proc">Review of newly placed accounts before collection efforts begin</td>

      <td align="center"><a href="/MasterList/Details/1">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Setup and Maintenance</td>
      <td>685 Queue/ Midland chargeoff balance issue</td>
      <td class="proc">Review and correction of Midland account balances</td>

      <td align="center"><a href="/MasterList/Details/2">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Skip Trace</td>
      <td class="proc">Re-Serve Request CA</td>

      <td align="center"><a href="/MasterList/Details/3">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Skip Trace</td>
      <td class="proc">Re-serve Request ID</td>

      <td align="center"><a href="/MasterList/Details/4">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Suit Referral</td>
      <td class="proc">Barclays Suit Referral</td>

      <td align="center"><a href="/MasterList/Details/5">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Suit Referral</td>
      <td class="proc">Capital One CRS Procedure</td>

      <td align="center"><a href="/MasterList/Details/6">Details</a></td>
    </tr>

  </tbody>
</table>

Answer 3

Answer №2

One issue that arises is the flexibility of display:table, where the size of the table contents determines the overall size of the table. To ensure your table maintains an exact size as defined by you, include {table-layout:fixed} in your table's CSS rule. This also requires setting a width for at least n-1 of n table columns, or else each column will automatically receive equal space. I suggest setting column widths in percentages, except for the last column which will take up any remaining space. To handle overflow content, consider using Paul Roub's method with text-overflow:ellipsis. While not universally supported, it provides one option without relying on javascript. For those looking to utilize javascript, the "dotdotdot" library comes highly recommended:

Answer 4

One issue that arises is the flexibility of display:table, where the size of the table contents determines the overall size of the table. To ensure your table maintains an exact size as defined by you, include {table-layout:fixed} in your table's CSS rule. This also requires setting a width for at least n-1 of n table columns, or else each column will automatically receive equal space. I suggest setting column widths in percentages, except for the last column which will take up any remaining space. To handle overflow content, consider using Paul Roub's method with text-overflow:ellipsis. While not universally supported, it provides one option without relying on javascript. For those looking to utilize javascript, the "dotdotdot" library comes highly recommended:

Answer 5

Answer №3

Take a look at this example here

//CSS styling

.thetable>tbody>tr>td+td+td+td {
    overflow:hidden;
    max-width:200px;
    white-space:nowrap;
}

Answer 6

Take a look at this example here

//CSS styling

.thetable>tbody>tr>td+td+td+td {
    overflow:hidden;
    max-width:200px;
    white-space:nowrap;
}

Concealing and wrapping text using CSS in a table structure

Answer №1

Answer №2

Answer №3

Similar questions

Using Polymer and D3: A guide to transferring JSON data from element attributes to templates

Is it possible for you to generate an array containing only one element?

The radio button becomes unchecked when moving to the next fieldset

It is impossible for me to utilize inline SVG as a custom cursor in CSS

Activate just the show more / show less button on the website that has several buttons with identical ids

The hover effect does not function on an SVG element when it is placed within an external file

react: implement custom context menu on videojs

"Enhance your web development skills by mastering jQuery alongside the

The height of the Material UI Paper component is not appropriately matched with the parent component

Formulate a jQuery array consisting of droppable components

Using Bootstrap 4: How to maximize the width of a span element placed near a label

Guide to automatically converting Google fonts to base64 for inline use

The function val() will not extract the present input value

Divergent Appearance of Input Field in Chrome versus Firefox

Scroll to a new section of the page if the specified id or name cannot be found

Restricting Checkbox Choices with JavaScript by Leveraging the forEach Function

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

Tips for reducing the height of the footer without compromising the alignment of the text within

Bottom div refuses to adhere to the bottom of the page

Tips for implementing arraybuffer playback in video tags