How to fix CSS "White-space: nowrap" in a table?

Question

I would like to show a text-overflow: ellipsis if the description is too long for the column. However, I'm not sure why my code isn't working. I added the! important in case if there were some internal CSS files that might have been overriding my CSS stuff. Right now, the text is all added to one line of code in the description and extending the width of 400px. [![Description Col][1]][1]

 <div class="table-responsive">
    <table class="table table-bordered" id="myTable" style="background-color:aqua">
        <thead>
            <tr style=" font-size: 18px;">
                <th style="background-color:cadetblue; width:150px;">
                    @Html.DisplayNameFor(model => model.WorkOrderNumber)
               </th>
            </tr>
        </thead>
        <tbody>

            @foreach (var item in Model)
            {
                    //THIS LINE IS NOT WORKING
                    <td style="background-color:blueviolet;  width:400px;  white-space: nowrap !important;  overflow: hidden !important; text-overflow: ellipsis !important;  ">
                        @Html.DisplayFor(modelItem => item.Description)
                    </td>

etc....

score 7 · Accepted Answer · answered Apr 22 '19 at 01:19

You need wrap your text inside div in td tag and apply below css

th>.truncate, td>.truncate{
  width: auto;
  min-width: 0;
  max-width: 200px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

you can change width as you want

table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 15px;
}

th>.truncate, td>.truncate{
  width: auto;
  min-width: 0;
  max-width: 200px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tr>
    <th><div class="truncate">Name</div></th>
    <th><div class="truncate">Address</div></th>
    <th><div class="truncate">Fees</div></th>
  </tr>
  <tr>
    <td><div class="truncate">ipsum or lipsum as it is sometimes known, is dummy text used in laying out print, graphic</div></td>
    <td>
     <div class="truncate">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic
     </div>
    </td>
    <td><div>$100</div></td>
  </tr>
  <tr>
    <td><div class="truncate">Lois</div></td>
    <td>
     <div class="truncate">
      dummy text used in laying out print, graphic
     </div>
    </td>
    <td><div>$150</div></td>
  </tr>
  <tr>
    <td><div class="truncate">Joe</div></td>
    <td>
     <div class="truncate">
      lipsum as it is sometimes known, is dummy text used in laying out print, graphic
     </div>
    </td>
    <td><div>$300</div></td>
  </tr>
</table>

How to fix CSS "White-space: nowrap" in a table?

1 Answers1