Menu
How do I set the "inner border" - the border between different cells.
By setting style attributes I manage to control the outer border, but the inner border just stays the same gray color and the same width. What attributes should I tweak to control the inner border?
342
When you use CSS to add borders to tables, it only adds the border around the outside of the table. If you want to add internal lines to the individual cells of that table, you need to add borders to the interior CSS elements. You can use the HR tag to add lines inside individual cells.
To change the width of the table's border, use the attribute border="p" where p = number of pixels wide the border should be. Note that using this attribute also adds borders to the cells. The table below has a border of 10 pixels. This is done with the table tag <table border="10">.
To specify table borders in CSS, use the border property.
For ordinary table markup, here's a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:
table { border-collapse: collapse; }
td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }
For IE 7 support, add this:
tr + tr > td,
tr + tr > th { border-top: 1px solid; }
A test case can be seen here: http://codepen.io/dalgard/pen/wmcdE
104
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
