缩放时防止表格移动 - CSS
prevent tables to move when zooming - 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: 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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <span class="nachkomma">Testtask 4846465464</span></td>
</tr>
</table>
</div>
</div>
将 .blocks
的 display
设置为 flex
以保持所有表格保持连续。
显然,浏览器对表格的缩放比例不同于其他非常小的内容。因此,您需要一个强制每行三个项目的解决方案。在 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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <span class="nachkomma">Testtask 4846465464</span></td>
</tr>
</table>
</td>
</tr>
</table>
。 大家好,当我缩小时,最后一张桌子会移到下一行。有没有办法修复布局,使表格不会移动到下一行?您能否给我一些建议或解决方法,以便我可以解决此问题? 我尝试了很多东西,但不幸的是我找不到解决方案。预先感谢您的所有支持和评论。
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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <span class="nachkomma">Testtask 4846465464</span></td>
</tr>
</table>
</div>
</div>
将 .blocks
的 display
设置为 flex
以保持所有表格保持连续。
显然,浏览器对表格的缩放比例不同于其他非常小的内容。因此,您需要一个强制每行三个项目的解决方案。在 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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <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> <span class="nachkomma">Testtask 25362541</span></td>
</tr>
<tr>
<td width="100"><span class="vork">2:</span> <span class="nachkomma">Testtask 6545645641</span></td>
</tr>
<tr>
<td width="100"><span class="vork">53:</span> <span class="nachkomma">Testtask 4846465463</span></td>
</tr>
<tr>
<td width="100"><span class="vork">4:</span> <span class="nachkomma">Testtask 4846465464</span></td>
</tr>
</table>
</td>
</tr>
</table>