css - HTML table to bootstrap div - columns -
i found bunch of links same question every questions depend on design. want change/convert these table bootstrap columns , div word same looks in table... seems going out of hand, link demo demo-fiddle .
div.page_wrapper { margin-top: 10px; border: 1px solid #cccccc; } td.page_cat { background: #eeeeee; padding: 6px 6px 6px 9px; font-weight: bold; font-size: 13px; } td.page_label { padding: 3px 5px 3px 5px; color: #aaaaaa; font-size: 9px; text-transform: uppercase; border-top: 1px solid #dddddd; } td.page_list0, td.page_list0a { padding: 8px 5px 8px 10px; border-top: 1px solid #dddddd; } td.page_list1, td.page_list1a { padding: 8px 5px 8px 5px; border-top: 1px solid #dddddd; } td.page_list0, td.page_list1 { background: #f5f5f5; } div.page_list_title { font-size: 12px; font-weight: bold; padding-top: 4px; } div.page_list_desc { font-size: 11px; clear: both; } div.page_list_mod { font-size: 11px; color: #888888; margin-top: 3px; } td.page_list_photo { background: #fff; border: 1px solid #dddddd; padding: 2px; width: 40px; text-align: center; } td.page_list_lastpost { padding-left: 6px; } td.page_list_lastpost div { font-size: 9px; } div.page_topic_title { font-size: 17px; font-weight: bold; margin-bottom: 7px; } div.page_topics { border: 1px solid #dddddd; border-top: none; } div.page_topic_wrapper1 { border-top: 3px solid #cccccc; background: #f7f7f7; } div.page_topic_wrapper2 { border-top: 3px solid #cccccc; background: #ffffff; } td.page_topic_left { width: 130px; vertical-align: top; padding: 7px 10px 10px 10px; } div.page_topic_author { font-weight: bold; font-size: 12px; margin-bottom: 4px; } td.page_topic_photo { width: 115px; height: 115px; background: #ffffff; border: 1px solid #cccccc; text-align: center; vertical-align: middle; } img.page_topic_photo_img { height: 110px; } div.page_topic_authorinfo { font-size: 9px; padding: 3px 0px 0px 0px; } div.page_topic_authorinfo span { font-weight: bold; } td.page_topic_right { vertical-align: top; padding: 10px; font-size: 12px; } div.page_topic_info { font-weight: bold; margin-bottom: 5px; color: #777777; } div.page_topic_info span { font-weight: normal; } div.page_topic_body { font-size: 12px; } td.page_topic_options { vertical-align: bottom; text-align: right; padding: 5px; font-size: 12px; } td.page_topic_options span, td.page_topic_replylink { font-weight: bold; } div.page_topic_deleted { border: 1px solid #dddddd; padding: 10px; border-left: none; border-right: none; font-style: italic; } div.page_mod { font-style: italic; margin-top: 5px; } div.page_quote { border: 1px solid #e3e3c1; padding: 10px; font-size: 12px; padding-left: 10px; background: #fafae2; margin-top: 7px; } div.page_quote div { font-size: 11px; margin-bottom: 3px; color: #777777; }<div class='page_header'>my header</div> <br> <table cellpadding='0' cellspacing='0'> <tr><td class='result'>result</td> </table> <table cellpadding='0' cellspacing='0'> <tr><td class='result' style='text-align: left;'>result-2</td> </table> <div class='page_wrapper'> <table cellpadding='0' cellspacing='0' width='100%'> <tr><td class='page_cat' colspan='5'>title</td></tr> <tr> <td class='page_label' style='width: 1px;' nowrap='nowrap'> </td> <td class='page_label' style='width: 50%;' nowrap='nowrap'>text</td> <td class='page_label' style='text-align: center;' nowrap='nowrap'>text</td> <td class='page_label' style='text-align: center;' nowrap='nowrap'>text</td> <td class='page_label' style='width: 50%;' nowrap='nowrap'>text</td> </tr> <tr> <td class='page_list0' style='vertical-align: top;'>icon</td> <td class='page_list1' style='vertical-align: top;'> <div class='page_list_title'><a href='#'>text</a></div> <div class='page_list_desc'>text</div> <div class='page_list_mod'> text </div> </td> <td class='page_list1' style='text-align: center;'>text</td> <td class='page_list1' style='text-align: center;'>text</td> <td class='page_list1'> <table cellpadding='0' cellspacing='0'> <tr> <td class='page_list_photo'><img src='./images/photo.gif' height='40' width='40'></td> <td class='page_list_lastpost'> <a href='#'>text</a> <a href='#'>text</a> <div> text </div> </td> </tr> </table> <table cellpadding='0' cellspacing='0'> <tr> <td class='page_list_photo'><img src='./images/photo.gif' width='40'></td> <td class='page_list_lastpost'> <a href='#'>text</a> text <div> text </div> </td> </tr> </table> </td> </tr> </table> </div>
why u want convert bootstarp col , div use bootstarp table http://getbootstrap.com/css/#tables-bordered
Comments
Post a Comment