Таблица и border неправильно работает?

Question

[Богдан]

Здравствуйте. Подскажите пожалуйста. Почему-то когда я задаю таблице CSS свойство "border-collapse: collapse" и далее уже в ячейках прописываю border: "border: 1px dotted #777" он как-то криво отображается, бывает на некоторых ячейках место dotted рисует solid? Как это пофиксить? Спасибо.

fiddle

<table style="width: 100%; border-collapse: collapse; padding: 10px 20px; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; color: #333333; text-align: center;">
            <thead>
                <tr>
                  <th colspan="7" style="padding: 15px 0; font-size: 19px; font-weight: bold;">
                   Currency rate changes
                  </th>
                </tr>             
            </thead>
            <tbody>
              <tr style="background-color: #e2e2e2; height: 50px; padding: 10px;">
                <td style="height: 50px; border: 1px dotted #777; border-right-width: 0; ">Currency pair</td>
                <td style="border: 1px dotted #777; border-right-width: 0;">Exchanges</td>
                <td style="border: 1px dotted #777; border-right-width: 0;">Direction</td> 
                <td style="border: 1px dotted #777; border-right-width: 0;">Accounting price</td>
                <td style="border: 1px dotted #777; border-right-width: 0;">Current price</td>  
                <td style="border: 1px dotted #777; border-right-width: 0;">&plusmn;</td> 
                <td style="border: 1px dotted #777;">%</td> 
              </tr>

             
            </tbody>
          </table>

Comments

[Сергей Герасимов]

Если первой ячейке сделать border: 0, тогда всё нормально, если поставить solid, то у всех ячеек верхняя граница будет solid... Магия?

[Сергей Герасимов]

Пишут о баге: https://stackoverflow.com/questions/7725110/double...

[Богдан]

И как пофиксить эту багу? А то separate использовать не могу, криво в письме в некоторых почтовиках.

[Алексей Николаев]

Богдан, используйте псевдоэлементы или background-image с повторением.

[Богдан]

Алексей Николаев, спасибо, а можно пример?

Answer 1

[CODALSD]

1 вариант:

<table style="width: 100%; border-collapse: collapse; padding: 10px 20px; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; color: #333333; text-align: center;">
            <thead>
                <tr>
                  <th colspan="7" style="padding: 15px 0; font-size: 19px; font-weight: bold;">
                   Currency rate changes
                  </th>
                </tr>             
            </thead>
            <tbody>
              <tr class="tr">
                <td class="td">Currency pair</td>
                <td class="td">Exchanges</td>
                <td class="td">Direction</td> 
                <td class="td">Accounting price</td>
                <td class="td">Current price</td>  
                <td class="td">&plusmn;</td> 
                <td class="td">%</td> 
              </tr>

             
            </tbody>
          </table>

th {
  border:none;
}
.tr {
background-color: #e2e2e2;
height: 50px;
padding: 10px;
}
.td {
border: 1px dotted #777; 
border-right: none;
}
.td:first-child {
  height: 50px; 
}
.td:last-child {
  border-right: 1px dotted #777;
}

2 вариант:

th {
  border:none;
 background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
}
.tr {
background-color: #e2e2e2;
height: 50px;
padding: 10px;
}
.td {
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;
border-bottom:1px dotted #777;

}
.td:first-child {
  height: 50px; 
  border-left: 1px dotted #777;
}
.td:last-child {
  border-right: 1px dotted #777;
}

Comments

[CODALSD]

Кстати даже то, что вы сами написали посмотрите в другом браузере или увеличьте масштаб страницы.
Код обрабатывается правильно, но хром например сам отрисовывает неправильно

[CODALSD]

Искал варианты решения, ничего дельного кроме как задавать border через градиенты нет. Так что второй вариант скорее всего является единственным решением. Но было бы интересно посмотреть на другие варианты решения, если они есть

[Богдан]

CODALSD, спасибо, я как бы решил пойти простым решением, и просто вместо dotted использую solid. Но Вам все-равно большая благодарность за советы