html - Overflow: hidden not working when TD, and TH width are specified -

-

i need help.

it seems td cell not respecting overflow: hidden in css. i've done recommended fixed layout of table specifying widths of th's , td's

any ideas?

<!doctype html> <html> <head>  <style type="text/css">  /*------------------------------------------------------------------ table style ------------------------------------------------------------------ */ table a:link {     color: #666;     font-weight: bold;     text-decoration:none; } table a:visited {     color: #999999;     font-weight:bold;     text-decoration:none; } table a:active, table a:hover {     color: #bd5a35;     text-decoration:underline; } table {     font-family:arial, helvetica, sans-serif;     color:#666;     font-size:12px;     background:#eaebec;     border-collapse:collapse;     border-spacing: 0;     table-layout: fixed; } table th {     padding:10px 10px 10px 10px;     border-bottom:1px solid #e0e0e0;     border-right: 1px solid #e0e0e0;     width: 160px;      background: #ededed; } table th:first-child {     text-align: left; } table tr:first-child th:first-child {     border-left: 0; }  table tr {     text-align: center; } table td:first-child {     text-align: left;     border-left: 0; } table td {     padding:10px;     border-bottom:1px solid #e0e0e0;     border-right: 1px solid #e0e0e0;     background: #fafafa;     width: 130px; } table tr:last-child td {     border-bottom: 0; }  table tr:hover td {     background: #f2f2f2;  }  #wrapper {     width: 740px;     height: 200px;     overflow-x: scroll;     overflow-y: scroll;     border: 1px solid rgb(205,205,205); } table thead {     position:fixed; } table td > div {     overflow: hidden;     white-space: nowrap; }   </style>  </head>  <body>  <div id="wrapper"> <table>      <!-- table header -->     <thead>         <tr>             <th>task details</th>             <th>firstname</th>             <th>progress</th>             <th>vital task</th>         </tr>     </thead>     <!-- table header -->      <!-- table body -->     <tbody>          <tr>             <td>create</td>             <td>&nbsp;</td>             <td>100%</td>             <td>yes</td>         </tr><!-- table row -->          <tr>             <td>take dog</td>             <td>&nbsp;</td>             <td>100%</td>             <td>yes</td>         </tr><!-- darker table row -->          <tr>             <td>waste half</td>             <td>&nbsp;</td>             <td>20%</td>             <td>no</td>         </tr>          <tr>             <td><div>feel inferior</div></td>             <td>&nbsp;</td>             <td>80%</td>             <td>no</td>         </tr>          <tr>             <td><div>some long text shouldn't resize box</div></td>             <td>&nbsp;</td>             <td>100%</td>             <td>yes</td>         </tr>          <tr>             <td><div>vow complete</div></td>             <td>&nbsp;</td>             <td>23%</td>             <td>yes</td>         </tr>          <tr>             <td>procrastinate</td>             <td>&nbsp;</td>             <td>80%</td>             <td>no</td>         </tr>          <tr>             <td><a href="#yep-iit-doesnt-exist">hyperlink example</a></td>             <td>&nbsp;</td>             <td>80%</td>             <td><a href="#inexistent-id">another</a></td>         </tr>      </tbody>     <!-- table body -->  </table> </div>  </body> </html>

you needed rid of white-space here

table td > div {    overflow: hidden;    white-space: nowrap; }

and added colgroups. better setting widths in columns , avoid issues

demo


Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more