缩放时防止表格移动 - CSS

Question

。大家好，当我缩小时，最后一张桌子会移到下一行。有没有办法修复布局，使表格不会移动到下一行？您能否给我一些建议或解决方法，以便我可以解决此问题？我尝试了很多东西，但不幸的是我找不到解决方案。预先感谢您的所有支持和评论。

table {
  width: 100%;
}

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

.blocks {
  display: block;
  position: relative;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}

<div class="blocks">
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>

        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
</div>

Answer 1

将 .blocks 的 display 设置为 flex 以保持所有表格保持连续。

Answer 2

显然，浏览器对表格的缩放比例不同于其他非常小的内容。因此，您需要一个强制每行三个项目的解决方案。在 CSS.

中有几种方法可以处理这个问题

第一个使用CSS Grid。请参阅下面对 .blocks 的更改。请注意，IE11 对网格的支持有限，因此您可能需要添加额外的 CSS 才能使其在该浏览器中正常工作。

table {
  width: 100%;
}

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

.blocks {
  display: inline-grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}

<div class="blocks">
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>

        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
</div>

另一种适用于所有浏览器的解决方案（可能会给我带来一些讨厌的邮件）是使用嵌套表格。

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}

<table>
  <tr>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>

          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

缩放时防止表格移动 - CSS

prevent tables to move when zooming - CSS

html

css

css-tables