HTML表格：保持列的宽度不变。

22 浏览
0 Comments

HTML表格：保持列的宽度不变。

我有一个包含多个列组的表格。这个表格比我的页面大，所以我有一个控件来显示/隐藏其中一些组以适应页面。初始表格看起来不错：在一个组内，所有列的宽度都差不多。但是当我隐藏一个组时，列的宽度不再相同，看起来很糟糕。
示例：（链接已损坏）
到目前为止，表格看起来还不错。点击“>>”。在“Ecommerce Pro”下的第一列比其他“Ecommerce Pro”下的列要宽得多，看起来很奇怪。点击“<<”，这次在“Value”下的第一列太宽了。至少在Firefox上是这样。 我尝试使用

...，但没有成功。如果我将一个列设置为style="display: none"，那一组列仍然会显示出来。
有没有关于HTML/CSS的提示可以让列在一个组内保持相同的宽度？
编辑：

  • 要隐藏一列，我必须使用visibility: collapse
  • 现在似乎调整得很好，我不知道为什么
0

3 答案

0 Comments

问题的原因是当隐藏/显示不同的列时，单元格的数量会发生变化。这导致列的宽度也会随之改变，无法保持相同的宽度。

解决方法是将所有列的宽度设置为相同的百分比，以确保它们始终保持相同的宽度。在这种情况下，可以将所有3列的宽度都设置为33.3%。这样，无论显示哪一列，浏览器都会将它们渲染为相似的宽度。以下是示例代码：


  

    Name
    Value
    Business
  

  

    John
    100
    Business A
  

  

    Jane
    200
    Business B
  

  

    Mike
    150
    Business C

通过将每个`

`元素的`style`属性设置为`width: 33.3%;`，我们确保了每个列始终具有相同的宽度。这样，无论隐藏/显示哪个列，表格的布局都会保持一致。

0
0 Comments

问题的原因是在HTML表格中，当表格的列数不确定时，想要保持每列的宽度相同比较困难。解决方法是给td元素添加样式width: 1%。如果表格本身有一个固定的宽度或者宽度设置为100%，那么这种方法就能奏效。

这种方法之所以有效是因为当我们将td元素的宽度设置为1%时，每列的宽度会根据表格的宽度进行自动调整。如果表格的宽度是固定的，那么每列的宽度就会按比例分配，从而保持相同的宽度。这种方法同样适用于只想固定左侧列宽度，而其他列宽度保持相同的情况。

下面是一个示例代码，演示了如何使用这种方法来保持表格的列宽度相同：




  

    Column 1
    Column 2
    Column 3
  

  

    Data 1
    Data 2
    Data 3
  

  

    Data 4
    Data 5
    Data 6

在这个示例中，我们给表格添加了一个宽度设置为100%的样式，并给td元素添加了width: 1%的样式。这样，每列的宽度就会自动调整，保持相同的宽度。

总结起来，要保持HTML表格的列宽度相同，可以通过给td元素添加样式width: 1%来实现。如果表格本身有一个固定的宽度或者宽度设置为100%，那么这种方法就会奏效。这种方法同样适用于只想固定左侧列宽度，而其他列宽度保持相同的情况。

0
0 Comments

HTML表格：保持列宽相同的问题

在HTML表格中，如果你设置了样式table-layout: fixed;，你可以覆盖浏览器的自动列调整功能。浏览器将根据表格第一行中的单元格宽度来设置列宽。修改你的<thead>为<caption>，并删除其中的<td>，然后为<tbody>中的单元格设置固定宽度。

只需添加table-layout: fixed;这一修改就能解决我遇到的相同问题（FFox 11）。

如果您需要设置单元格宽度，那么使用固定的表格布局有什么意义呢？

0