HTML表格列宽度练习

在表格中选择列宽时有什么好的做法？比方说，我有四列，名称（可变宽度），描述（文本的长内容），计数（最多3个字符），日期（固定格式）。HTML表格列宽度练习

这将是一个好的做法？我想着descr。，count和width的固定宽度（因此实际上也使得名称“固定”宽度）。但我真正的问题是，如何选择特定的宽度尺寸。例如，如果日期格式是yyyy-MM-dd，有一些技巧将这10个字符转换为一个宽度，这将确保在任何使用任何字体和字体大小的浏览器中显示正常（也不会占用任何过多空间）？

编辑：随着固定我的意思是“相对像素的固定量的字体宽度”

来源

2010-10-08 icanBany1

您可以使用EM作为度量单位，这将保证你将有足够的空间，但可能会为您提供更多的比你所需要的。 – 2010-10-08 16:22:04

我想像固定数量的像素相对于字体宽度意味着em，正如Kevin Wiskia所评论的那样，但我个人发现修复像素是一个坏主意（当涉及到宽度时（尽管它对高度有好处）。原因是你不知道用户屏幕的宽度。让我们假设你的桌子只需要500个像素，但用户有一个1920×1080的屏幕。这意味着您的桌子现在占用屏幕宽度的25％以下。然而，使用我的方法，您可以占用屏幕的75％，并将每列列为该75％的特定百分比。 – ClarkeyBoy 2010-10-09 16:40:10

@ClarkeyBoy，好点。也许那么一个好的解决方案是将表格宽度指定为75％，并使用空格指定单个列/单元格：使用字体大小为em的nowrap？然后，列将占用尽可能多的空间（没有多余的空间），即使在1920x1080时也不会看起来很小。 – icanBany1 2010-10-09 17:56:25

一个类似于您可以对所有要舒展，因为他们需要尽可能多的不使用额外的空间细胞申报white-space: nowrap;（名称，日期，数量），然后简单地给你的剩余单元格100％的宽度。这样100％宽的细胞将尽可能地扩大，而不会导致其他细胞在多条细胞系上崩溃。

来源

2010-10-08 16:34:36

如果你想自己节省大量的标记......

首先，如果固定宽度你的意思是一个固定的百分比，以下内容添加到您的样式表：

.width1 { 
    width: 1%; 
} 
.width2 { 
    width: 2%; 
} 
.width99 { 
    width: 99%; 
} 
.width100 { 
    width: 100%; 
}

这给你如果你愿意，如果你决定为它们中的任何一个应用一个奇数的百分比宽度，你需要的灵活性 - 例如，其中一个宽度为23，另一个宽度为27。

现在这是聪明的一点。使用col标签，您可以仅应用一次宽度，而不是在每个单元上应用宽度。我知道你可以将宽度应用到第一行，并且他们将在每隔一行设置相同单元格的宽度 - 但col标签也可用于设置其他属性。例如：

<table class="width100"> 
    <col class="width15" style="background-color: #cccccc;" /> 
    <col class="width65" /> 
    <col class="width10" /> 
    <col class="width10" /> 
    <tr> 
     <td>My Sample Name</td> 
     <td>My Sample Long Description</td> 
     <td>5</td> 
     <td>2010-Oct-08</td> 
    </tr> 
</table>

我通常喜欢使用这种技术 - 但如果它是一个布局我将使用多个表（例如，客户表可以是布局的代理商表相同），那么我将为每一列创建一个类并设置该类的宽度等。然后我会将相关课程应用于每个单元格。我想这两种方法都可以合并 - 相关的类可以应用到相关的列，但是属性设置在一个地方（样式表）的事实意味着你只需要在一次地方改变它。

希望这可以帮助，这是你在找什么。

理查德

来源

2010-10-08 16:34:54 ClarkeyBoy

什么与downvote？它与这个问题完全相关，并且是一个非常快速的解决方案...我希望它是强制性的人们说为什么他们downvoted ... – ClarkeyBoy 2010-10-08 16:56:48

可能是因为它增加了很多多余的代码到你的CSS需要转移到客户。它是非语义的。而标签不能100％正常工作。 – 2010-10-08 19:58:20

但是它几乎不影响加载页面的速度 - 我个人并不特别在乎我的网站需要下载多少代码 - 如果我可以在我的计算机上快速加载它们（最大宽带速度为每秒50kb），那么接近足够的人能够。如果它在我的机器上快速加载，那么我很高兴。 – ClarkeyBoy 2010-10-08 20:03:19

HTML表格列宽度练习

回答

相关问题