如何为页面中的多个表应用相同的样式

Question

我在aspx页面中有两个gridview，每个都有相似的数据。这是屏幕截图。

网格中每列的宽度以％定义，并且两个网格的宽度相同。即使这样，输出也不如预期，但是列宽略有变化。我需要确保两个网格列看起来都一样。有没有人知道如何解决这个问题（.net / javascript）。感谢您的帮助。

Answer 1

构建表时，

分别为每列设置类，然后在CSS中设置宽度

<table style="width: 100%;">
    <tr>
        <td class='firstCol'></td>
        <td class='secCol'></td>
        <td class='thrdCol'></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

和风格

<style type="text/css">
    .firstCol
    {
        width: 10%;
        }

   .secCol
    {
        width: 20%;
        }

   .thrdCol
    {
        width: 30%;
        }

</style>

Answer 2

您可以使用CSS和类。例如，在表格行上，您希望保持相同的可写性

<tr class="specialrow">

或某些细胞

<td class="specialcell">

你会像这样编写css

.specialcell
  {
    width:100px;
  }

或许jsfiddle会有所帮助吗？

Answer 3

确保两个表都相等的一种方法是只使用一个表。这不是最好的解决方案，但它可以完成工作。为了在它们之间进行分隔，您需要在它们之间加上<tr colspan="14"><td>&nbsp;</td></tr>。

同样，这不是最好的解决方案。如果从您的业务角度来看，以这种方式使用它是有意义的（表格显示有关同一事物的信息并且将其视为一个整体是有意义的），那么您可以毫无罪恶地使用它。

无论如何......在同一张桌子上寻找关于有几个s和s的一些信息让我得到了这个答案，其中有很多关于如何做的有用信息：Multiple thead/tbody design

您可以尝试在两个表中使用css table-layout:fixed，然后指定css中每列的宽度。