我正在一个包含多个表的布局中,其中一些表比其他表具有更多的列。容器的宽度在设计时是未知的,但是当容器的宽度足以容纳最宽表中的所有列时,所有表都将对齐。随着容器宽度的减小,所有表都将水平收缩,只要它们有足够的空白空间即可。当最大的表无法进一步缩小时,它会溢出,并且容器会显示相应的水平滚动条。但是,其余的表在有足够的空间时会不断缩小,因此我失去了它们之间的一致性。
当最大的表无法进一步缩小时,我希望所有表都停止缩小。那可能吗?
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>
Regulardiv
和max-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>table
为article table
您就可以了
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句