javascript - Table borders are not visible inside expandable list content -
i started learning html , copied code create expandable-collapsible list. in list content, have created table, borders of table not visible when open web page. same table displays fine border when run on webpage without list. please me solve problem. code shown below:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/> </head> <body> <div> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><h5> <a>leader </a></h5></div> <div class="collapsible-body"> sample line course description <p>the best brains compete admission two-year legendary course offered us. course, unmatched in rigour , precision, raises zenith of preparation. stimulating atmosphere of institute, small batches (yes-we believe in quality) , 1 one interaction instructor ensure every rough edge smoothened, every small doubt cleared. more importantly, train think analytically, give systematic approach problem solving . if think bright, if think capable, if think can make top, course precisely you. </p> <table style="text-align: left; width: 718px; height: 139px; margin-left: auto; margin-right: auto;" border=10 bordercolor=red cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">mode of admission<br> </td> <td colspan="2" rowspan="1" style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">through boost <br> </td> </tr> <tr> <td style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">phases<br> </td> <td style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">phase 1<br> </td> <td style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">phase 2<br> </td> </tr> <tr> <td style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">commencement date<br> </td> <td style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">7 april 2016<br> </td> <td style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">28 april 2016<br> </td> </tr> <tr> <td style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">last of registration<br> </td> <td style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">5 april 2016<br> </td> <td style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">26 april 2016<br> </td> </tr> <tr> <td style="vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold;">last date of refund<br> </td> <td style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">20 april 2016<br> </td> <td style="vertical-align: top; text-align: center; background-color: rgb(255, 255, 51);">10 may 2016<br> </td> </tr> </tbody> </table> <br> <br> </div> </li> </ul> </div> </body> </html>
here example collapsible list looks like:
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible
you can use javascript jquery done fast.
your table looks fine.
edit:
the problems in styling. i've modified approach little table styled css class named "table-style". table cells styled using classes "table-cell-1" , "table-cell-2". have better view on styling in css. copy paste , test sample. give thumbs if need.
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/> <style> .table-style { text-align: left; width: 718px; height: 139px; margin-left: auto; margin-right: auto; border-style: solid; border-width: 10px; border-color: red; cellpadding: 2; cellspacing: 2; } .table-cell-1 { vertical-align: top; text-align: center; background-color: rgb(204, 204, 204); font-weight: bold; border-style: solid; border-color: red; } .table-cell-2 { vertical-align: top; text-align: center; background-color: rgb(255, 255, 51); border-style: solid; border-color: red; } </style> </head> <body> <div> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><h5> <a>leader </a></h5></div> <div class="collapsible-body"> sample line course description <p>the best brains compete admission two-year legendary course offered us. course, unmatched in rigour , precision, raises zenith of preparation. stimulating atmosphere of institute, small batches (yes-we believe in quality) , 1 one interaction instructor ensure every rough edge smoothened, every small doubt cleared. more importantly, train think analytically, give systematic approach problem solving . if think bright, if think capable, if think can make top, course precisely you. </p> <table class="table-style"> <tbody> <tr> <td class="table-cell-1">mode of admission<br> </td> <td colspan="2" rowspan="1" class="table-cell-2">through boost <br> </td> </tr> <tr> <td class="table-cell-1">phases<br> </td> <td class="table-cell-2">phase1<br> </td> <td class="table-cell-2">phase2<br> </td> </tr> <tr> <td class="table-cell-1">commencement date<br> </td> <td class="table-cell-2">7 april 2016<br> </td> <td class="table-cell-2">28 april 2016<br> </td> </tr> <tr> <td class="table-cell-1">last of registration<br> </td> <td class="table-cell-2">5 april 2016<br> </td> <td class="table-cell-2">26 april 2016<br> </td> </tr> <tr> <td class="table-cell-1">last date of refund<br> </td> <td class="table-cell-2">20 april 2016<br> </td> <td class="table-cell-2">10 may 2016<br> </td> </tr> </tbody> </table> <br> <br> </div> </li> </ul> </div> </body> </html> if want have thicker borders in cells, can use: border-width: 10px; in other css classes, can change value like.
Comments
Post a Comment