Question

我使用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;
}

您可以看到表格第一行的底部边框有一个像素的“中断”。

我该如何解决？

Answer 1

您在这里，这可能会解决您的问题。您只需选择表格的第一行。

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>

Answer 2

您可以将表格单元格的内容包装在另一个<div>中，然后将display:flex;应用于<div>。请参见下面的代码段。

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>

Answer 3

我修复它的方法是添加

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

到CSS文件。

我喜欢在任何可能的地方使用display: flex;，因为它比其他任何方法都更加灵活和易于操作。您可以详细了解here。

Flexbox内容在表格中有一个像素偏移

3 个答案: