Я использую flexbox, чтобы отрегулировать свои выравнивания в ячейке таблицы: https://jsfiddle.net/vincentle/zcgLxyd2/

table.qtn-header th.right-col{
    display:flex;    
    justify-content:space-between;
}
table.qtn-header th.right-col .left-item{  
  align-self: flex-end;
}

Вы можете видеть, что нижняя граница первой строки таблицы имеет «разрыв» в один пиксель.

Как я могу это решить?

0
user777466 21 Авг 2018 в 15:27

3 ответа

Лучший ответ

Вы можете обернуть содержимое ячейки таблицы в другую <div> и вместо этого применить display:flex; к <div>. Смотрите фрагмент ниже.

< EM> P.S . в вашем примере граница в Chrome разрывается, но в Firefox отображается нормально.

body{
  font-family: 'Open Sans', sans-serif;
}
table.qtn-header{
  width:100%;
  border-collapse:collapse;
  font-size:12pt;
}

table.qtn-header td{
  padding-top:.5em;
  padding-bottom:.2em;
}

table.qtn-header th{
  font-family: 'Oswald', sans-serif;
  font-size:26pt;
  border-bottom:1pt solid black;
}

table.qtn-header th.right-col .flex-wrapper {
    display:flex;    
    justify-content:space-between;
}
table.qtn-header th.right-col .left-item{  
  align-self: flex-end;
}
table.qtn-header th.right-col .right-item{
    align-self: flex-end;
}
table.qtn-header .left-col{
  width:25%;
  text-align:right;
  padding-right:1em;
  vertical-align:bottom;
}
table.qtn-header .right-col{
  width:75%;
  text-align:left;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
<table class="qtn-header">
  <tr>
    <th class="left-col">Devis</th>
    <th class="right-col">
      <div class="flex-wrapper">
        <div class="left-item">QTN-2018-001</div>
        <div class="rignt-item"><img  src="https://www.apitrak.com/static/images/email_cta" height="80px"/></div>
      </div>
      
    </th>
  </tr>
  <tr>
    <td class="left-col">Client :</td>
    <td class="right-col">Alicia Matin, blable</td>
  </tr>
  <tr>
    <td class="left-col">Date de rédaction :</td>
    <td class="right-col">bla</td>
  </tr>
  <tr>
    <td class="left-col">Date de validité</td>
    <td class="right-col">blo</td>
  </tr>
</table>
0
Alex Shesterov 21 Авг 2018 в 12:37

Я исправил это, добавив

table.qtn-header tr th{
 display: flex;
}

В файл CSS.

Мне нравится использовать display: flex; всякий раз, когда это возможно, потому что он гораздо более гибкий и им легче манипулировать, чем любым другим. Подробнее об этом вы можете прочитать здесь.

0
Arthur Senna 21 Авг 2018 в 12:40

Вот, пожалуйста, это может решить вашу проблему. Вы можете просто выбрать первый ряд таблицы.

body{
  font-family: 'Open Sans', sans-serif;
}
table.qtn-header{
  width:100%;
  border-collapse:collapse;
  font-size:12pt;
}

table.qtn-header td{
  padding-top:.5em;
  padding-bottom:.2em;
}

table.qtn-header th{
  font-family: 'Oswald', sans-serif;
  font-size:26pt;
  /*border-bottom:1pt solid black;*/
}

table.qtn-header th.right-col{
    display:flex;    
    justify-content:space-between;
}
table.qtn-header th.right-col .left-item{  
  align-self: flex-end;
}
table.qtn-header th.right-col .right-item{
    align-self: flex-end;
}
table.qtn-header .left-col{
  width:25%;
  text-align:right;
  padding-right:1em;
  vertical-align:bottom;
}
table.qtn-header .right-col{
  width:75%;
  text-align:left;
}
tr:first-child
{
  border-bottom:1pt solid #333;
 }
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
<table class="qtn-header">
  <tr>
    <th class="left-col">Devis</th>
    <th class="right-col">
      <div class="left-item">QTN-2018-001</div>
      <div class="rignt-item"><img  src="https://www.apitrak.com/static/images/email_cta" height="80px"/></div>
      
    </th>
  </tr>
  <tr>
    <td class="left-col">Client :</td>
    <td class="right-col">Alicia Matin, blable</td>
  </tr>
  <tr>
    <td class="left-col">Date de rédaction :</td>
    <td class="right-col">bla</td>
  </tr>
  <tr>
    <td class="left-col">Date de validité</td>
    <td class="right-col">blo</td>
  </tr>
</table>
1
Viira 21 Авг 2018 в 12:40
51948679