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

Question

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

网格中每列的宽度以 % 为单位定义，并且两个网格的宽度相同。即使这样，输出也不如预期，但列宽略有变化。我需要确保两个网格列应该相同。有谁知道如何解决这个问题（.net/javascript）。提前感谢您的帮助。

Answer 1

确保两个表相等的一种方法是只使用一个表。这不是最好的解决方案，但它会完成工作。为了将它们分开，您需要在它们之间放置一个<tr colspan="14"><td> </td></tr>。

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

无论如何...寻找一些关于在同一个表中包含多个 s 和 s 的信息将我引向这个答案，其中包含很多关于如何做到这一点的有用信息：Multiple thead/tbody design

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

Answer 2

在建表时分别为每一列设置类，然后在 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 3

您可以使用 CSS 和类。例如，在您希望保持不变的表格行上，您可以编写

<tr class="specialrow">

或对于某些单元格

<td class="specialcell">

你会这样写 css

.specialcell
  {
    width:100px;
  }

也许 jsfiddle 会有所帮助？