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.

htmlcss

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

JavaScript file to run with npm start: import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import Routes from './routes'; ReactDOM.render( <R ...

javascripthtmlreactjsexpressjsx

Delete a div when a button is clicked through JavaScript

I'm having an issue with a form I created that duplicates itself - I can't seem to get the 'x' button to remove the corresponding div as needed. I have placed both buttons outside of the div like this: <button type="button" id="cro ...

javascriptjqueryhtmlcss

Is there a way for me to modify this carousel so that it only stops when a user hovers over one of the boxes?

I am currently working to modify some existing code to fit my website concept. One aspect I am struggling with is how to make the 'pause' function activate only when a user hovers over one of the li items, preventing the carousel from looping end ...

javascriptjquerycsscarousel

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

Maintaining aspect ratio of canvas while ensuring responsiveness

Currently, I am working on a drawing app and have come across an issue that has been challenging for me to resolve. The dilemma lies in resizing the canvas of sketches from the original resolution of 1280 x 720 to the maximum size possible upon opening the ...

javascriptcssangularcanvasresponsive-design

Tips for maintaining sequential numbering in Mediawiki sections

Looking to enhance the formatting of numbered lists by adding section headers and restarting numbering? The old Mediawiki format supported this, but it no longer works in version 1.24. For example: ==First Header2== # # ==Second Header2== # Desired output ...

cssheadermediawikiindentationnumbered-list

Is it possible to have an icon change color in a TableRow column when hovering over any part of that particular row?

I am currently using material-ui version 4.9.5. To illustrate my issue, I have created a simplified example here. I have a Table that is populated with basic JSON data. Each row in the table consists of an icon element along with its corresponding color a ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to scale down my entire webpage to 65%?

Everything looks great on my 1920x1080 monitor, but when I switch to a 1024x768 monitor, the content on my webpage becomes too large. I've been manually resizing with CTRL+Scroll to reduce it to 65%, which works fine. Is there a code solution using CS ...

javascripthtmlcssjoomla

Alignment of Bootstrap input groups and buttons

I am looking to have the input group aligned on the left side and the "Add New" button aligned on the right side of the row. <div class="row"> <div class="input-group col-sm-6"> <input type="text" class="form-control" placehol ...

csstwitter-bootstrapbuttoninputalignment

Tips for hiding a soft keyboard with jQuery

Here is a text button: <input type="text" class="field" id="something" name="something" placeholder="text" autofocus /> I want to prevent the android soft keyboard from popping up and keep the focus on this field. I only want to do this for this ...

javascriptandroidjqueryhtml

The position of the scroll bar remains consistent as you navigate between different websites

Is it possible for me to click on a link within my HTML website and have the other website load with me in the exact same position? For example, if I'm halfway down a webpage and click a link, can I be taken to that same point on the new page? If so, ...

javascriptjqueryhtmlcss

The background image does not appear on the animated div until the browser window is resized

Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...

jquerycssbackground-imagevisibilitywindow-resize

Guide to personalizing checkbox design using react-bootstrap

I am working with react-bootstrap and attempting to style a custom checkbox, as it appears possible but is not working. I have followed the documentation provided here. Here is the code snippet: import * as React from "react"; import { t as typy } from & ...

cssreactjsreact-bootstrap

Adjusting the dimensions of two pictures side by side using Bootstrap 3

I've been experimenting with Bootstrap to align two images side by side using different columns. I made sure they were aligned properly and even added some background colors for better visibility. However, when I tested the responsive design by chang ...

htmlcssimageresponsive

Issue with Bootstrap carousel: image protrudes past boundaries of parent container

Struggling with setting up a bootstrap carousel on my page. I want the image to extend beyond the parent div, positioned at the bottom rather than the top. How can I achieve this without disrupting the default carousel behavior? Here's a sketch of how ...

javascripthtmlcsstwitter-bootstrapcarousel

Developing a dynamic table using HTML and JavaScript

I have a question that might sound silly, but I am trying to retrieve the HTML content from this particular website using JavaScript. The data I'm interested in is located at the center of the page within a dynamic table which does not change the URL ...

javascriptjqueryhtmlajax

Which takes precedence: the end of the script tag or the backtick?

Currently, I am working on developing a page builder widget. My goal is to save the entirety of the HTML code for the edited page to both local storage and a database. The PHP script will load the saved HTML from the database, while JavaScript will handle ...

javascriptphphtml

Enhanced auto-zoom feature with orientation change for iOS 7

My web page was functioning perfectly until the release of iOS 7 by Apple today, causing the layout to break when the screen orientation is changed. When focusing on a text area and rotating the screen to landscape view, the entire page zooms in. However, ...

htmliphonecssmobileios7

Development of "individual profiles"

This is my first time venturing into web app development and everything is quite unfamiliar to me. I have successfully set up a couple of PHP scripts to interact with an SQL database for user login and registration purposes. However, I now wish to implem ...

phpsqlhtml

Dividers afloat - expanding current script with multiple additions

I am currently utilizing this website as a hub for showcasing my various web projects. The jsfiddle code provided in response to this particular inquiry is exactly what I need, however, I am unsure of how to have multiple divs moving simultaneously acros ...

javascriptjquerycsshtml