Question

我有以下html和CSS，其目的是将显示的宽列放在桌面查看器上，作为任何小屏幕设备的下面一行。那很有用。但是，当我使用Firefox（在桌面浏览器上）查看它时，我在表格的底部会看到一个边框，但是当我使用Chrome查看它时，我没有。

请注意border-bottom：0px;是必要的，这样在小型设备上显示的两行代替大屏幕上的单行不应该在它们之间有一条水平线。

作为问题的简单版本，我已经完全删除了td的所有边界属性，并且只依赖于tbody边框，但它仍然无法正常工作。很明显它不是边界底部：0px;导致Chrome省略底线的属性。

.big-small-table {
  border-collapse: collapse;
}
.big-small-table th {
  border: thin solid;
  padding: 3px 10px;
}
.big-small-table td {
/*border: thin solid;*/
/*border-bottom:0px;*/
/*border-top:0px;*/
  padding: 3px 10px;
}
.big-small-table tbody {
  border: thin solid;
}

.desc-big-screen {
  display:table-cell;
}

.desc-small-screen {
  display:none;
}

@media only screen and (max-device-width: 400px) {
  .desc-big-screen {
    display:none;
  }

  .desc-small-screen {
    display:table-cell;
  }
}

<body>
<table class="big-small-table">
    <tr>
      <th>Type</th>
      <th class="desc-big-screen">Description</th>
      <th>Data</th>
    </tr>
  <tbody>
    <tr>
      <td>Small</td>
      <td class="desc-big-screen">This is the description of something small.</td>
      <td>1</td>
    </tr>
    <tr><td colspan="2" class="desc-small-screen">This is the description of something small.</td></tr>
  </tbody>
  <tbody>
    <tr>
      <td>Medium</td>
      <td class="desc-big-screen">This is the description of something medium.</td>
      <td>5</td>
    </tr>
    <tr><td colspan="2" class="desc-small-screen">This is the description of something medium.</td></tr>
  </tbody>
  <tbody>
    <tr>
      <td>Large</td>
      <td class="desc-big-screen">This is the description of something large.</td>
      <td>50</td>
    </tr>
    <tr><td colspan="2" class="desc-small-screen">This is the description of something large.</td></tr>
  </tbody>
</table>  
</body>

有谁知道如何让我桌子底部的边框也出现在Chrome中？

Answer 1

最后，我通过在大屏幕模式下在每个tbody的第一行中明确地设置所有td的边框并在小屏幕模式下明确地将相同边框设置为零来解决它。这很丑陋，但至少我现在有一个解决方案，Chrome忽略了桌子底部的tbody边框！

.big-small-table {
  border-collapse: collapse;
}
.big-small-table th {
  border: thin solid;
  padding: 3px 10px;
}
.big-small-table td {
  border-left: thin solid;
  border-right: thin solid;
  padding: 3px 10px;
}
.big-small-table tbody {
  border: thin solid;
}
.big-small-table tbody tr:first-child td {
  border-bottom: thin solid;
}
.desc-big-screen {
  display:table-cell;
}

.desc-small-screen {
  display:none;
}

@media only screen and (max-device-width: 400px) {
  .big-small-table tbody tr:first-child td {
    border-bottom: 0px;
  }
  .desc-big-screen {
    display:none;
  }

  .desc-small-screen {
    display:table-cell;
  }
}

<body>
<table class="big-small-table">
    <tr>
      <th>Type</th>
      <th class="desc-big-screen">Description</th>
      <th>Data</th>
    </tr>
  <tbody>
    <tr>
      <td>Small</td>
      <td class="desc-big-screen">This is the description of something small.</td>
      <td>1</td>
    </tr>
    <tr><td colspan="2" class="desc-small-screen">This is the description of something small.</td></tr>
  </tbody>
  <tbody>
    <tr>
      <td>Medium</td>
      <td class="desc-big-screen">This is the description of something medium.</td>
      <td>5</td>
    </tr>
    <tr><td colspan="2" class="desc-small-screen">This is the description of something medium.</td></tr>
  </tbody>
  <tbody>
    <tr>
      <td>Large</td>
      <td class="desc-big-screen">This is the description of something large.</td>
      <td>50</td>
    </tr>
    <tr><td colspan="2" class="desc-small-screen">This is the description of something large.</td></tr>
  </tbody>
</table>  
</body>

桌面底部边框显示在Firefox中，但不显示在Chrome中

1 个答案: