Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with applying dotted border to cells in table design

Here's my fiddle:

http://jsfiddle.net/gFA4p/84/

In this screenshot, the green lines represent where I'm trying to apply dotted lines.

enter image description here

I am able to get the left-right borders to appear as dotted lines, but not the bottom borders.

How can I resolve this?

like image 428
keruilin Avatar asked Jun 13 '11 02:06

keruilin


People also ask

What 3 types of border styles can a table have?

border-bottom-style. border-left-style. border-right-style.

Can we apply border to a cell in a table?

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).

Which of the following does not have a border in table tag?

Parent table having no border.

What is the correct syntax for applying border for entire table?

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>.


3 Answers

The issue you're seeing is due to the rules of conflict resolution when it comes to border collapse. Solid takes precedence over dotted:

http://lachy.id.au/dev/css/tests/bordercollapse/bordercollapse.html

I believe you will need to make the conflicting borders dotted as well. So if you went a cell's left border to be dotted, you'll need to make the right border of the cell to its left also dotted (or anything of lower precedence, but dotted make the most sense).

like image 55
James Montagne Avatar answered Oct 05 '22 00:10

James Montagne


Here is a solution:

  1. If you do not specify the four borders for each cell, but only the left and bottom borders, you will avoid border conflicts:

    .geniusPicks table tr.pickConsensusBody td {
        border-left: solid 1px black;
        border-bottom: solid 1px black;
        background: grey;
    }
    .geniusPicks table tr.pickBody td {
        border-left: solid 1px black;
        border-bottom: solid 1px black;
    }
    
  2. Then, to make the dotted borders in the fourth column you just have to apply your dottedLeftBorder and dottedBottomBorder classes to its cells (but only the dottedLeftBorder class for the last cell).

Now here is the corresponding fiddle: http://jsfiddle.net/Fvds5/3/, where every cell in the fourth column has now left and bottom dotted 1px black borders, except the last one that has no dotted bottom border.

like image 37
Luc125 Avatar answered Oct 05 '22 00:10

Luc125


Ok, this answer is partially devised from the information provided in the previous answers, but simply adding !important, or making both left- and right- borders dotted of adjacent cells is not enough.

First, the rendering mechanism between various browsers is not the same. This fiddle shows two lines over the total height of 4 rows in IE, FF and Opera. But Chrome and SafariWin shorten the left line to only one row.

To compensate for this, I added an extra dummy column, which proved also very usefull to eliminate most of the classes in the HTML.

Secondly, the base css style now only gives a left- and bottom-border to the cells. As a result, the last cells got a lastCol style, because IE7 does not add borders to the tr tag.

Here is the revised fiddle, tested with IE7, IE8, IE9, FF, Opera, SafariWin and Chrome.

Edit:

If you réally don't want the dummy column, I've managed it to get this far, but that solution does not work in Chrome or SafariWin. (Something strange is going on. Maybe someone else can explain.)

like image 32
NGLN Avatar answered Oct 05 '22 01:10

NGLN