Menu
<html> <style type="text/css"> .table { display: table;} .tablerow { display: table-row; border:1px solid black;} .tablecell { display: table-cell; } </style> <div class="table"> <div class="tablerow"> <div class="tablecell">Hello</div> <div class="tablecell">world</div> </div> <div class="tablerow"> <div class="tablecell">foo</div> <div class="tablecell">bar</div> </div> </div> </html> According to my understanding, a black border should be drawn on each of the rows which I've specified via tablerow class. But the border doesn't come up.
And I wanted to change the height of a row. If I specify it with 'px' -- it works. But, if I give it with a % -- won't work.I tried the following
.tablerow { display: table-row; border:1px solid black; position: relative; //not affecting anything and the border disappears!! //position: absolute; // if this is set,the rows overlaps and the border works height: 40%; // works only if specified in px and not in % } Something is going wrong somewhere, but I am not able to understand where. Please help!
346
CSS Border Not Showing If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
To create table border in HTML, the border attribute was used. But the introduction of HTML5, deprecated the border tag. Create table border using the CSS property border. Set table border as well as border for <th> and <td>.
To add a border to your table, you need to define the <style> of your table. Remember to add borders also for <th> and <td> tags to have a complete table. Set the border-collapse property as well (if you don't define the border-collapse, it will use border-collapse: separate by default).
Click the Table Design tab.) Click Border Styles and choose a border style. Click Borders and choose where you want to add the borders. Tip: To change or add borders for part of your table, check that Border Painter is selected and then, in the table, click each border that you want to change or add.
You need to add border-collapse: collapse; to the .table class for it to work like this:
<html> <style type="text/css"> .table { display: table; border-collapse: collapse;} .tablerow { display: table-row; border: 1px solid #000;} .tablecell { display: table-cell; } </style> <div class="table"> <div class="tablerow"> <div class="tablecell">Hello</div> <div class="tablecell">world</div> </div> <div class="tablerow"> <div class="tablecell">foo</div> <div class="tablecell">bar</div> </div> </div> </html> You need to add the border to the tablecell class.
Also, to make it look nice, you will need to add border-collapse:collapse; to the table class.
Example: http://jsfiddle.net/jasongennaro/4bvc2/
EDIT
As per the comment
i'm applying a border to a div,it should get displayed right ?
Yes, but once you set it to display as a table that is how it will act... as a table, so you will then need to follow the css rules for displaying tables.
If you need to set the border only on the rows, use border-top and border-bottom and then set specific classes for the leftmost and rightmost cells.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
