Question 202166 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How can I keep content of a cell of a 20 Column HTML Table in one line and wrap specific width

I have long data in one Cell, I need to put the data up to a specific width in one line and the rest wraps to the next line.
I have been able to make it in a line but can not wrap after specific width with td{word-wrap: break-word;}, probably because of td{white-space: nowrap}. I don’t intend to wrap in middle of the word.

The style and HTML structure are going to be used to create tables in an ERP.

I have the following CSS:

``
th { /* header cell */
    border-bottom: 2px solid #EB9486;
    position: sticky;
    top: 0;
    background-color: #F9F8F8;
}
td {  /*body cell */
    white-space: nowrap;
    border: 1px solid black;
}

/*Adds scroll to the table*/
.table-container {
    overflow: auto;
    height: 300px;
}
``

``
<div class="table-container">
    <table>
        <thead>
            <tr>
                <th class="FirstHeader">Name</th>
                <th class="SecondHeader">Job</th>
                <th>Salary</th>
                <th>Name</th>
                <th>Job</th>
                <th>Salary</th>
                <th>Name</th>
                <th>Job</th>
                <th>Salary</th>
                <th>Name</th>
                <th>Job</th>
                <th>Salary</th>
                <th>Name</th>
                <th>Job</th>
                <th>Salary</th>
                <th>Name</th>
                <th>Job</th>
                <th>Salary</th>
                <th>Name</th>
                <th>Job</th>
                
            </tr>
        </thead>

        <tbody>
            <tr class="FirstColumn">
                <td>Olivia Saturday</td>
                <td>Senior Data Engineer</td>
                <td>$320,000</td>
                <td>David Smith</td>
                <td>Manager Strategic Finance Manager Strategic Finance     Manager11</td>
                <td>$180,000</td>
                <td>David Smith</td>
                <td> Manager Strategic Finance Manager Strategic Finance Manager</td>
                <td>$180,000</td>
                <td>David Smith</td>
                <td> Manager Strategic Finance Manager Strategic Finance Manager</td>
                <td>$180,000</td>
                <td>David Smith</td>
                <td> Manager Strategic Finance Manager Strategic Finance Manager</td>
                <td>$180,000</td>
                <td>David Smith</td>
                <td> Manager Strategic Finance Manager Strategic Finance Manager</td>
                <td>$180,000</td>
                <td>David Smith</td>
                <td>Manager Strategic Finance Manager Strategic Finance Manager</td>
                <td>$180,000</td>
                <td>David Smith</td>
                <td>Manager Strategic Finance Manager Strategic Finance Manager</td>
                <td>$180,000</td>
            </tr>

            <tr class="SecondColumn">
                <td>David Smith</td>
                <td> Manager Strategic Finance Manager Strategic Finance Manager</td>
                <td>$180,000</td>
            </tr>

            <tr>
                <td>Margaret Mills</td>
                <td>Lead Software Engineer</td>
                <td>$250,000</td>
            </tr>

            <tr>
                <td>Paul Brown</td>
                <td>Digital Content Writer</td>
                <td>$145,000</td>
            </tr>

            <tr>
                <td>Stephanie Tavartkiladze</td>
                <td>Digital Project Manager</td>
                <td>$250,000</td>
            </tr>

            <tr>
                <td>Olivia Saturday</td>
                <td>Senior Data Engineer</td>
                <td>$320,000</td>
            </tr>

            <tr>
                <td>David Smith</td>
                <td>Strategic Finance Manager</td>
                <td>$180,000</td>
            </tr>

            <tr>
                <td>Margaret Mills</td>
                <td>Lead Software Engineer</td>
                <td>$250,000</td>
            </tr>

            <tr>
                <td>Paul Brown</td>
                <td>Digital Content Writer</td>
                <td>$145,000</td>
            </tr>

            <tr>
                <td>Stephanie Tavartkiladze</td>
                <td>Digital Project Manager</td>
                <td>$250,000</td>
            </tr>

            <tr>
                <td>Olivia Saturday</td>
                <td>Senior Data Engineer</td>
                <td>$320,000</td>
            </tr>

            <tr>
                <td>David Smith</td>
                <td>Strategic Finance Manager</td>
                <td>$180,000</td>
            </tr>

            <tr>
                <td>Margaret Mills</td>
                <td>Lead Software Engineer</td>
                <td>$250,000</td>
            </tr>

            <tr>
                <td>Paul Brown</td>
                <td>Digital Content Writer</td>
                <td>$145,000</td>
            </tr>

            <tr>
                <td>Stephanie Tavartkiladze</td>
                <td>Digital Project Manager</td>
                <td>$250,000</td>
            </tr>

            <tr>
                <td>Olivia Saturday</td>
                <td>Senior Data Engineer</td>
                <td>$320,000</td>
            </tr>

            <tr>
                <td>David Smith</td>
                <td>Strategic Finance Manager</td>
                <td>$180,000</td>
            </tr>

            <tr>
                <td>Margaret Mills</td>
                <td>Lead Software Engineer</td>
                <td>$250,000</td>
            </tr>

            <tr>
                <td>Paul Brown</td>
                <td>Digital Content Writer</td>
                <td>$145,000</td>
            </tr>

            <tr>
                <td>Stephanie Tavartkiladze</td>
                <td>Digital Project Manager</td>
                <td>$250,000</td>
            </tr>
        </tbody>
    </table>
</div>
``

If I don’t use td{white-space: nowrap;} the data wraps because of the number of columns.
Perhaps I should change the HTML as well. I don’t know. I am confused.
Please help me with that.

Tags:

2

Answers


  1. 0

    Not too sure if I understand the question, but you can use the nowrap keyword in the td tag:

    Option 1:

    <td nowrap>content</td>

    If you need a fixed width you can also create a class…

    Option 2:

    html:

    <td class="fixed-width">content</td>

    css:

    .fixed-width { width: 200px;}

    or do inline styles

    Option 3:

    <td style="width: 200px;">content</td>
    Login or Signup to reply.
  2. 0

    Basically I think your problem stems from a missing column, and maybe that was throwing you?

    The code below should give you a scrolling table with no wrapping.
    and maybe the empty (merged) cells are not really neccessary, if Show_Empty_Cells is
    Experiment with it and try changing the styles and review the effects of the changes.

    <%@ Page Language="VB" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <style>
   /*CONTAINER*/
   .mytablecontainer {
       margin-left: auto;
       margin-right: auto;
       width: 90%;
       overflow: scroll; /* SCROLLING */
       height: 300px;
   }
   /*TABLE*/
   .mytabletable {
      border-collapse: collapse;
      border: 1px solid #EB9486;
      height: 300px;
      background-color: #FFFFFF;
   }
   th { /* header cell */
       position: sticky;
       top: 0;
       padding: 8px;
       background-color: #F9F8F8;
       border: 1px solid black;
   }
   td 
   {  /*body cell */
      text-align: left;
      vertical-align: top;
       border: 1px solid black;
   }
   .textcolumn
   {
      text-align: left;
      vertical-align: top;
      padding: 8px;
      border: 1px solid black;
      white-space: nowrap;
   }
   .moneycolumn
   {
      text-align: right;
      vertical-align: top;
      padding: 8px;
      border: 1px solid black;
      white-space: nowrap;
   }

   </style>
</head>
<body>

<form id="form1" runat="server">
   <div class="mytablecontainer">
      <table class="mytabletable">
         <!-- Headers -->
         <thead>
            <tr>
               <th>Name</th>
               <th>Job</th>
               <th>Salary</th>
               <th>Name</th>
               <th>Job</th>
               <th>Salary</th>
               <th>Name</th>
               <th>Job</th>
               <th>Salary</th>
               <th>Name</th>
               <th>Job</th>
               <th>Salary</th>
               <th>Name</th>
               <th>Job</th>
               <th>Salary</th>
               <th>Name</th>
               <th>Job</th>
               <th>Salary</th>
               <th>Name</th>
               <th>Job</th>
               <th>Salary</th> <!-- This column was missing? -->
            </tr>
         </thead>
         <!-- Body -->
         <tbody>
            <tr> <!-- First ROW not first column -->
               <td class="textcolumn">Olivia Saturday</td>
               <td class="textcolumn">Senior Data Engineer</td>
               <td class="MoneyColumn">$320,000</td>
               <td class="textcolumn">David Smith</td>
               <td class="textcolumn">Manager Strategic Finance Manager Strategic Finance     Manager11</td>
               <td class="moneycolumn">$180,000</td>
               <td class="textcolumn">David Smith</td>
               <td class="textcolumn"> Manager Strategic Finance Manager Strategic Finance Manager</td>
               <td class="moneycolumn">$180,000</td>
               <td class="textcolumn">David Smith</td>
               <td class="textcolumn"> Manager Strategic Finance Manager Strategic Finance Manager</td>
               <td class="moneycolumn">$180,000</td>
               <td class="textcolumn">David Smith</td>
               <td class="textcolumn"> Manager Strategic Finance Manager Strategic Finance Manager</td>
               <td class="moneycolumn">$180,000</td>
               <td class="textcolumn">David Smith</td>
               <td class="textcolumn"> Manager Strategic Finance Manager Strategic Finance Manager</td>
               <td class="moneycolumn">$180,000</td>
               <td class="textcolumn">David Smith</td>
               <td class="textcolumn">Manager Strategic Finance Manager Strategic Finance Manager</td>
               <td class="moneycolumn">$180,000</td>
            </tr><tr>
               <td class="textcolumn">David Smith</td>
               <td class="textcolumn"> Manager Strategic Finance Manager Strategic Finance Manager</td>
               <td class="moneycolumn">$180,000</td>
               <td colspan="18">&nbsp;</td>
            </tr><tr>
               <td class="textcolumn">Margaret Mills</td>
               <td class="textcolumn">Lead Software Engineer</td>
               <td class="moneycolumn">$250,000</td>
               <td colspan="18">&nbsp;</td>
            </tr><tr>
               <td class="textcolumn">Paul Brown</td>
               <td class="textcolumn">Digital Content Writer</td>
               <td class="moneycolumn">$145,000</td>
               <td colspan="18">&nbsp;merge all contigous empty cells into one</td>
            </tr><tr>
               <td class="textcolumn">Stephanie Tavartkiladze</td>
               <td class="textcolumn">Digital Project Manager</td>
               <td class="moneycolumn">$250,000</td>
               <td colspan="18">&nbsp;</td>
            </tr><tr>
               <td class="textcolumn">Charly Boy</td>
               <td class="textcolumn">King of the UK</td>
               <td class="moneycolumn">Unspecified</td>
               <td colspan="18">&nbsp;</td>
            </tr>
         </tbody>
      </table>
   </div>
</form>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search