Question

在我的Web应用程序中有许多页面显示表格数据（通常是每个对象显示大约5个属性的对象列表）。

每个表对列宽有不同的需求。我使用CSS来指定宽度，但我担心我的方法会导致一个膨胀的CSS文件。

以下是我所拥有的一个例子......

table.mytblname2 td.stuff { width: 10%; }
table.mytblname2 td.this { width: 10%; }
table.mytblname2 td.that { width: 10%; }
table.mytblname2 td.something { width: 70%; }

table.mytblname3 td.anothercol { width: 25%; }
table.mytblname3 td.stuff { width: 25%; }
table.mytblname3 td.foo { width: 20%; }
table.mytblname3 td.bar { width: 20%; }
table.mytblname3 td.something { width: 10%; }

我看到它的方式， class =“anothercol”和 style =“width：20％”使用完全相同数量的字符，所以我可能会使用在这种特殊情况下，通过膨胀我的CSS文件获得更多带宽。

这是可以改进的吗？怎么样？

应用程序正在使用ASP.NET MVC 2，我需要跨浏览器兼容到IE6，并避免在用户禁用JavaScript时使其无法读取。

更新

这是我最终采用的方法（来自ddagradi和Jason的答案）。

table.data { width: 100%; ... etc ... }
table.data td, table.data th { padding: 4px; border: ... etc ... }

table.data th.w10 { width: 10%; }
table.data th.w20 { width: 20%; }
table.data th.w30 { width: 30%; }
table.data th.w40 { width: 40%; }
... etc ...

<table class="data">
  <thead>
    <tr>
      <th class="w20">Date</th>
      <th class="w40">Name</th>
      <th class="w40">Description</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

我的CSS文件更清晰，我可以在HTML中告诉宽度是多少。我通过“table.data td”和“table.data th”控制td / th的常见样式。谢谢大家！

Answer 1

通常，表格会尝试为所有列提供统一的宽度，并优先考虑内容较长的列。如果你只指定需要更宽的列的宽度（即每个表中的1个），你可能最终会得到一个非常好的布局。

至于使用内联CSS，混合内容和样式被认为是不好的形式，你真的应该把所有样式保存在样式表中。如果您觉得您的CSS变得臃肿，请尝试找出可以压缩的样式，因为它们是相同的，例如：

td.foo, td.bar { width: 40%; }

因此，当您需要修改一个页面元素的显示时，您的样式在整个站点中保持一致。

Answer 2

您可以尝试组合具有相同属性的表列并删除所有冗余声明：

.stuff, .this, .that { width: 10%; }

如何组织CSS - 表列

2 个答案: