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

How to create a 1px border-collapsed table grid that resizes properly even if zoomed

本文关键字：缩放 调整 网格 创建 何创建 1px 表格 折叠 边框      更新时间：2023-09-26

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

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

但是，我发现表格在不同的缩放级别下非常古怪且非常不可预测。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 值来避免浏览器在缩放时出现挤压问题(如果浏览器窗口太小(，尽管现在我可能不得不在任何地方使用它。

在过去的

2 年里，我有幸不得不使用表格样式......(甜！我知道(。我已经学会了一些驯服它们的方法，一旦你知道了这些简单的小技巧，你就会像 1999 年一样设计桌子。

.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 上设置宽度，不如更进一步(字面意思(并在标题中的 th 上设置宽度：

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

现在，这将使您的桌子处于良好状态。如果你想超越这一点，你必须添加一些媒体查询，并将你的表转换为"块"和"内联块"元素。

以下是已完成的所有内容的示例： http://jsfiddle.net/oneeezy/MJ2nt/5/

相关文章：