Question

好。经过多方努力和烦恼，我创造了一个相当称职的1px边界15 * 15网格设计，可以在不同的缩放级别上正确显示。然而，试图补偿最小宽度和最小高度是一种痛苦。这是必要的，因为网格将在150 +％缩放时变得不成比例，因为还没有像'min-width：intrinsic＆＃39;这样的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值来避免浏览器在缩放时遇到问题（如果浏览器窗口太小） - 尽管现在我还是可能不得不到处使用它。

Answer 1

在过去的两年里，我有过“桌面造型”的乐趣......（甜蜜！我知道）。我已经学会了一些驯服它们的方法，一旦你知道了这些简单的小动作，你就会像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上设置宽度，而是在上面（字面意思）向上移动一步并在你的thead中设置你的宽度：

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

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

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

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

1 个答案:

HTML

CSS