html - How to move columns to the left in table? -
i want move columns left , there should set fixed size in between.
now looks this: http://i.imgur.com/k1pytt2.png
hopefully result: http://i.imgur.com/ef2oxhn.png
css code:
.table { width:100%; } .table table{ border-collapse: collapse; width:100%; } .table td{ padding-left: 5px; color: #000000; font-size: 12px; line-height: 16px; margin-bottom: 6px; font-family: arial,helvetica,sans-serif; } .table tr:nth-child(odd){ background-color:#efefef; } .table tr:nth-child(even) { background-color:#ffffff; } .table tr:first-child td{ padding-left: 5px; background-color:#efefef; text-align:left; color:#868686; font-size: 12px; font-family: arial,helvetica,sans-serif; line-height: 16px; margin-bottom: 6px; } /* border line in middle (first-child) example: 1 | 2 | 3 */ .table tr:first-child td:not(:last-child) { border-right: 1px solid #868686;}
html:
<div class="table" > <table> <tr> <td> id# </td> <td> name </td> <td> edit </td> <td> delete </td> </tr> <tr><td><?php echo $tags_id ?></td><td><?php echo $name ?></td> <td><?php echo "<a href='edit.php?id=$tags_id'>edit</a>"; ?></td> <td><?php echo "<a href='delete.php?id=$tags_id'>delete</a>"; ?></td></tr> </table> </div>
i hope help, in advance.
you didn't tell version of html using, following should work in version. add <colgroup> first child of table element this:
<table> <colgroup> <col width="20em"/> <col width="10em"/> <col width="10em"/> </colgroup> </table>
this fix widths of columns number of characters. if doesn't work out way want to, try setting width attribute on <table> , use percentages in <col/> widths:
<table width="40%"> <colgroup> <col width="50%"/> <col width="25%"/> <col width="25%"/> </colgroup> </table>
Comments
Post a Comment