当最大的表无法再缩小时,如何防止某些表缩小?

疯狂的车

我正在一个包含多个表的布局中,其中一些表比其他表具有更多的列。容器的宽度在设计时是未知的,但是当容器的宽度足以容纳最宽表中的所有列时,所有表都将对齐。随着容器宽度的减小,所有表都将水平收缩,只要它们有足够的空白空间即可。当最大的表无法进一步缩小时,它会溢出,并且容器会显示相应的水平滚动条。但是,其余的表在有足够的空间时会不断缩小,因此我失去了它们之间的一致性。

当最大的表无法进一步缩小时,我希望所有表都停止缩小。那可能吗?

article {
  margin:0 40px;
}

article>table {
  border-collapse: collapse;
  border: 1px solid rgba(0,0,0,0.2);
  width: 100%;
  font-size: 90%;
  margin-bottom:20px;
}

article>table+table.cont {
  border-top:none;
}

article>table>thead {
  white-space: nowrap;
}

article>table>thead td {
  text-align: right;
  background-color: #cfe0e6;
  color: #1a1b1f;
  padding-top: 1px;
  padding-bottom:3px;
}

article>table>tbody>tr>td {
  white-space: nowrap;
  transition: background-color .3s;
}

article>table>tbody>tr>td:not(:first-child) {
  text-align:right;
  width:1px
}

article>table tr>td:not(:first-child) {
  padding:0 5px
}
<article>
   <h2>Section title</h2>
   <table>
      <thead>
         <tr>
            <td></td>
            <td>Units</td>
            <td>Unit price</td>
            <td>Subtotal</td>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Item 1 relatively long name</td>
            <td><span class="vl">3,530</span></td>
            <td><span class="vl">0.130848</span></td>
            <td><span class="vl">461.89</span></td>
         </tr>
         <tr>
            <td>Item 2 relatively long name</td>
            <td><span class="vl">3,459</span></td>
            <td><span class="vl">0.108193</span></td>
            <td><span class="vl">374.24</span></td>
         </tr>
         <tr>
            <td>Item 3 relatively long name</td>
            <td><span class="vl">1,831</span></td>
            <td><span class="vl">0.074858</span></td>
            <td><span class="vl">137.06</span></td>
         </tr>
      </tbody>
   </table>
   <table>
      <thead>
         <tr>
            <td></td>
            <td>Units</td>
            <td>Period</td>
            <td>Unit price</td>
            <td>Subtotal</td>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Item 4 relatively long name</td>
            <td><span class="vl">49.000</span></td>
            <td><span class="vl">24</span></td>
            <td><span class="vl">0.108735</span></td>
            <td><span class="vl">127.87</span></td>
         </tr>
         <tr>
            <td>Item 5 relatively long name</td>
            <td><span class="vl">51.300</span></td>
            <td><span class="vl">24</span></td>
            <td><span class="vl">0.065241</span></td>
            <td><span class="vl">80.32</span></td>
         </tr>
         <tr>
            <td>Item 6 relatively long name</td>
            <td><span class="vl">47.000</span></td>
            <td><span class="vl">24</span></td>
            <td><span class="vl">0.043494</span></td>
            <td><span class="vl">49.06</span></td>
         </tr>
      </tbody>
   </table>
   <table>
      <thead>
         <tr>
            <td></td>
            <td>Units</td>
            <td>Unit price</td>
            <td>Subtotal</td>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Item 7 relatively long name</td>
            <td><span class="vl">599</span></td>
            <td><span class="vl">0.041554</span></td>
            <td><span class="vl">24.89</span></td>
         </tr>
         <tr>
            <td>Item 8 relatively long name</td>
            <td><span class="vl">611</span></td>
            <td><span class="vl">0.041554</span></td>
            <td><span class="vl">25.39</span></td>
         </tr>
      </tbody>
   </table>
   <table>
      <tbody>
         <tr>
            <td>Total</td>
            <td><span class="vl cal">1,280.72</span></td>
         </tr>
      </tbody>
   </table>
</article>

杰里米·蒂尔

Regulardivmax-with不会在这里解决问题,因为您需要告诉您的父容器适应其子容器的最大尺寸。但是,CSS无法做到这一点,因为它是级联父级子级,而不是相反。

一个巧妙的解决方法/技巧是用一个单元格将所有表封装在一个全局表中:

article {
  margin: 0 40px;
  overflow-x: auto;
}

td.oneCell{
   border: red dashed 2px;
}

article table {
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  font-size: 90%;
  margin-bottom: 20px;
}

article table+table.cont {
  border-top: none;
}

article table>thead {
  white-space: nowrap;
}

article table>thead td {
  text-align: right;
  background-color: #cfe0e6;
  color: #1a1b1f;
  padding-top: 1px;
  padding-bottom: 3px;
}

article table>tbody>tr>td {
  white-space: nowrap;
  transition: background-color .3s;
}

article table>tbody>tr>td:not(:first-child) {
  text-align: right;
  width: 1px
}

article table tr>td:not(:first-child) {
  padding: 0 5px
}
<article>
  <h2>Section title</h2>
  <table>
    <tbody>
      <tr>
        <td class="oneCell">
          <table>
            <thead>
              <tr>
                <td></td>
                <td>Units</td>
                <td>Unit price</td>
                <td>Subtotal</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Item 1 relatively long name</td>
                <td><span class="vl">3,530</span></td>
                <td><span class="vl">0.130848</span></td>
                <td><span class="vl">461.89</span></td>
              </tr>
              <tr>
                <td>Item 2 relatively long name</td>
                <td><span class="vl">3,459</span></td>
                <td><span class="vl">0.108193</span></td>
                <td><span class="vl">374.24</span></td>
              </tr>
              <tr>
                <td>Item 3 relatively long name</td>
                <td><span class="vl">1,831</span></td>
                <td><span class="vl">0.074858</span></td>
                <td><span class="vl">137.06</span></td>
              </tr>
            </tbody>
          </table>
          <table>
            <thead>
              <tr>
                <td></td>
                <td>Units</td>
                <td>Period</td>
                <td>Unit price</td>
                <td>Subtotal</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Item 4 relatively long name</td>
                <td><span class="vl">49.000</span></td>
                <td><span class="vl">24</span></td>
                <td><span class="vl">0.108735</span></td>
                <td><span class="vl">127.87</span></td>
              </tr>
              <tr>
                <td>Item 5 relatively long name</td>
                <td><span class="vl">51.300</span></td>
                <td><span class="vl">24</span></td>
                <td><span class="vl">0.065241</span></td>
                <td><span class="vl">80.32</span></td>
              </tr>
              <tr>
                <td>Item 6 relatively long name</td>
                <td><span class="vl">47.000</span></td>
                <td><span class="vl">24</span></td>
                <td><span class="vl">0.043494</span></td>
                <td><span class="vl">49.06</span></td>
              </tr>
            </tbody>
          </table>
          <table>
            <thead>
              <tr>
                <td></td>
                <td>Units</td>
                <td>Unit price</td>
                <td>Subtotal</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Item 7 relatively long name</td>
                <td><span class="vl">599</span></td>
                <td><span class="vl">0.041554</span></td>
                <td><span class="vl">24.89</span></td>
              </tr>
              <tr>
                <td>Item 8 relatively long name</td>
                <td><span class="vl">611</span></td>
                <td><span class="vl">0.041554</span></td>
                <td><span class="vl">25.39</span></td>
              </tr>
            </tbody>
          </table>
          <table>
            <tbody>
              <tr>
                <td>Total</td>
                <td><span class="vl cal">1,280.72</span></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</article>

但是,您还需要像我一样编辑CSS,因为当前它专门针对内的第一级表<article>,因此可以通过针对任何表来使其更加灵活。替换article>tablearticle table您就可以了

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章