css - Displaying results in a table horizontally -
i'm using bootstrap 3 , trying figure out how results align horizontally in table , not vertically. see bootply
i want achieve this:
peter| orange, banana, apple john | apple, orange mary | sam | orange
but keep getting this:
peter| orange, banana, apple john | apple, orange mary | sam | orange
the html
<div class="container"> <div class="row"> <br> <span class="label label-default\">table</span> <h2>table 2</h2> <table><tbody><tr><td><span class="label label-default">mary</span></td></tr><tr><td><span class="label label-success"></span></td></tr></tbody></table><table><tbody><tr><td><span class="label label-default">john</span></td></tr><tr><td><span class="label label-success">banana</span></td></tr></tbody></table><table><tbody><tr><td><span class="label label-default">peter</span></td></tr><tr><td><span class="label label-success">orange</span></td></tr><tr><td><span class="label label-success">orange</span></td></tr></tbody></table><table><tbody><tr><td><span class="label label-default">sue</span></td></tr><tr><td><span class="label label-success">orange</span></td></tr><tr><td><span class="label label-success">apple</span></td></tr></tbody></table> </div> <!-- /col.8 --> </div><!-- /center-block -->
as <tr></tr>
creates new rows need remove between cells within each table
<tr> <td> <span class="label label-default">mary</span> </td> <!-- removed close , start "tr" tag here --> <td> <span class="label label-success"></span> </td> </tr>
and there no need make multiple tables, code this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div class="container"> <div class="row"> <span class="label label-default\">table</span> <h2>table 2</h2> <table> <tbody> <tr> <td> <span class="label label-default">mary</span> </td> <td> <span class="label label-success"></span> </td> </tr> <tr> <td> <span class="label label-default">john</span> </td> <td><span class="label label-success">banana</span> </td> </tr> <tr> <td><span class="label label-default">peter</span> </td> <td><span class="label label-success">orange</span> </td> <td><span class="label label-success">orange</span> </td> </tr> </tbody> </table> <!-- /col.8 --> </div> <!-- /center-block -->
Comments
Post a Comment