html - CSS wrapping and hiding text within a table -

-

i've searched other answers , none of them seem produce desired results looking for.

here table: (removed , added rendered html @ bottom.)

currently isn't wrapping text table looks nice , clean. have long procedures names , table pushed off page.

what want happen if name longer width of cell hides text.

i want procedure have width constrains.

enter image description here

edit adding rendered html:

i have added no additional css project outside of included in asp.net mvc4 starter template.

<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 , maintenance</td>             <td>new placement scrub</td>             <td>review of newly placed accounts determine if there missing information or incorrect information before collection efforts begun</td>              <td align="center"><a href="/masterlist/details/1">details</a></td>         </tr>         <tr>             <td>legal process</td>             <td>setup , maintenance</td>             <td>685 queue/ midland chargeoff balance issue</td>             <td>review , correction of midland accounts placed differing charge off , current principal balances</td>              <td align="center"><a href="/masterlist/details/2">details</a></td>         </tr>         <tr>             <td>legal process</td>             <td>lawsuit , judgment process</td>             <td>skip trace</td>             <td>re-serve request ca</td>              <td align="center"><a href="/masterlist/details/3">details</a></td>         </tr>         <tr>             <td>legal process</td>             <td>lawsuit , judgment process</td>             <td>skip trace</td>             <td>re-serve request id</td>              <td align="center"><a href="/masterlist/details/4">details</a></td>         </tr>         <tr>             <td>legal process</td>             <td>lawsuit , judgment process</td>             <td>suit referral</td>             <td>barclays suit referral</td>              <td align="center"><a href="/masterlist/details/5">details</a></td>         </tr>         <tr>             <td>legal process</td>             <td>lawsuit , judgment process</td>             <td>suit referral</td>             <td>capital 1 crs procedure</td>              <td align="center"><a href="/masterlist/details/6">details</a></td>         </tr>         <tr>             <td>litigation support</td>             <td>admin mailroom &amp; doc production</td>             <td>oregon ten day demand letter</td>             <td>ten day demand letter sent debtor</td>              <td align="center"><a href="/masterlist/details/7">details</a></td>         </tr>         <tr>             <td>litigation support</td>             <td>admin mailroom &amp; doc production</td>             <td>oregon debtor exam</td>             <td>debtor exam  forwarded court issuing</td>              <td align="center"><a href="/masterlist/details/8">details</a></td>         </tr>         <tr>             <td>litigation support</td>             <td>admin mailroom &amp; doc production</td>             <td>oregon debtor exam</td>             <td>debtor exam returned court , forwarded process server service</td>              <td align="center"><a href="/masterlist/details/9">details</a></td>         </tr>         <tr>             <td>litigation support</td>             <td>lawsuit , judgment process</td>             <td>oregon subpoena </td>             <td>subpoena forwarded process server service</td>              <td align="center"><a href="/masterlist/details/10">details</a></td>         </tr>         <tr>             <td>finance</td>             <td>h/r - payroll</td>             <td>benefits</td>             <td>benefits signup</td>              <td align="center"><a href="/masterlist/details/11">details</a></td>         </tr>         <tr>             <td>finance</td>             <td>h/r - payroll</td>             <td>benefits</td>             <td>benefits summary</td>              <td align="center"><a href="/masterlist/details/12">details</a></td>         </tr>         <tr>             <td>finance</td>             <td>h/r - payroll</td>             <td>new hire</td>             <td>background check</td>              <td align="center"><a href="/masterlist/details/13">details</a></td>         </tr>         <tr>             <td>finance</td>             <td>h/r - payroll</td>             <td>new hire</td>             <td>isi orientation - drug test</td>              <td align="center"><a href="/masterlist/details/14">details</a></td>         </tr>         <tr>             <td>finance</td>             <td>processing</td>             <td>client remittances</td>             <td>asset acceptance remit</td>              <td align="center"><a href="/masterlist/details/15">details</a></td>         </tr>         <tr>             <td>finance</td>             <td>processing</td>             <td>client remittances</td>             <td>end of month remits</td>              <td align="center"><a href="/masterlist/details/16">details</a></td>         </tr>         <tr>             <td>finance</td>             <td>processing</td>             <td>cost audits</td>             <td>internal cost audits</td>              <td align="center"><a href="/masterlist/details/17">details</a></td>         </tr>         <tr>             <td>finance</td>             <td>processing</td>             <td>cost audits</td>             <td>weekly cost duplicates</td>              <td align="center"><a href="/masterlist/details/18">details</a></td>         </tr> </tbody></table>

if can add class each "procedure" column (and header, well), so:

 <tr>    <td>litigation support</td>    <td>admin mailroom &amp; doc production</td>    <td>oregon debtor exam</td>    <td class="proc">debtor exam  forwarded court issuing</td>     <td align="center"><a href="/masterlist/details/8">details</a></td>  </tr>

you can reign text in so:

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

see http://codepen.io/paulroub/pen/rvlnb example


Comments

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

What is the difference between data design and data model(ERD) -

-
i have google question , find answer in day. know, data design many many table have list column,and mark pk , fk. why er-diagram have find this? data design process of designing database. main output of data design detailed logical data model of database. some people data design includes of needed logical , physical design choices , physical storage parameters needed generate design in data definition language. technically, database analysis, database analysts (dbas) trained do. while person can both data design , database analysis, these 2 different tasks. data design models data. database analysis takes model , applies 1 or more database engines (relational, hierarchical, nosql). a logical data model 1 of main outputs of data design. data model represented entity relationship diagram, or er diagram.
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more