javascript - 如何创建即使缩放也能正确调整大小的 1px 边框折叠表格网格

Question

好的。经过大量的努力和烦恼，我创建了一个相当称职的 1px 边框 15*15 网格设计，可以在不同的缩放级别正确显示。然而，试图补偿最小宽度和最小高度是一件痛苦的事情。这是必要的，因为网格在 150+% 缩放时会变得不成比例，因为尚不存在内联 block 值的 `min-width: intrinsic' 之类的 css 属性。虽然我可以简单地指定一个我认为不会被越过的默认最小宽度，但这似乎有点 hack。我想正确地做到这一点。

由于网格是我可以而且实际上可能应该使用表格的罕见情况之一，所以我想使用表格。 (耶。)如果我能让我的表格正常工作，我将简单地将最小宽度设置为我的首选表格宽度(和高度)，工作完成。

但是，我发现表格在不同的缩放级别下非常古怪且难以预测。 Firefox 并不总是平等地显示表格单元格的宽度，甚至会导致某些单元格的边框宽度出现奇怪的不规则变化。如果我不在 td 本身上定义宽度，Chrome 似乎不会保持表格正方形(这首先违背了使用表格的目的)。显示:表具有相同的悲伤行为。而且我什至不想知道 IE 到底是做什么的。我错过了什么吗？

如果有人帮助我创建一个真正的表格，它看起来像我的以下代码，但在不同的 devicePixelRatios(以及不同的浏览器)下正确地保持其形状和网格边界，我将不胜感激。

<style>
.squares { border-left: 1px #bcafaf solid; border-top: 1px #bcafaf solid; float: left;
  background: black; }
</style>

<div id = "board" style = "display: inline-block; border: 1px brown solid;"></div>
<script src = 'jquery-1.11.1.min.js'></script>
<script>
$(function() {
for (var i=0;i<225;i++) { 
$('#board').append( $('<div/>',{ 'class':"squares", width:'2.0rem', height : '2.0rem', id : 'x'+(i+1) }) ); 
    if (i%15===0) { $('.squares').eq(i).css({ clear: 'left' }); } 
}
});
// code for adding border-right and border-bottom for necessary squares, etc
</script>

非常感谢

注意:此时我使用绝对 rem 值来避免缩放时浏览器压缩问题(以及如果浏览器窗口太小)——尽管现在我可能不得不使用无处不在。

Answer 1

在过去的 2 年里，我一直“很高兴”不得不处理表格样式……(太棒了!我知道)。我已经学会了一些驯服它们的方法，一旦您掌握了这些简单的小技巧，您就会像 1999 年那样设计 table 。

HTML

从您的 html 开始，看起来像这样:

<table class="flipscroll">
<thead>
    <tr>
        <th class="width10">10% Width</th>            
        <th class="width20">20% Width</th>
        <th class="width10">10% Width</th>
        <th class="width10">10% Width</th>
        <th class="width50">50% Width</th>
    </tr>
</thead>            

<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</tbody>

</table>

CSS

首先将您的默认样式设置为“border-box(仅此一项就解决了很多问题，我建议您在以后构建的每个网站上都使用它!)”

/* Default Styles */
*, *:after, *:before { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }

然后应用表格样式:

/* Table styles */
table { table-layout: fixed; width: 100%; border-collapse: collapse !important; border-spacing: 0 !important; } 
table * { border: 1px solid black; }

不要在 tds 上设置宽度，而是更上一层楼(字面意思)并在您的 thead 中设置宽度:

    /* Table widths (controled only by <th>) */
    .width10 { width: 10%; }
    .width20 { width: 20%; }
    .width50 { width: 50%; }

现在，这将使您的表格处于良好状态。如果您想超越它，您将必须添加一些媒体查询并将您的表格转换为“ block ”和“内联 block ”元素。

这是所有已完成的示例:http://jsfiddle.net/oneeezy/MJ2nt/5/