个人中心
gpt4 book ai didi

具有可独立于单元格内容调整大小的行和列的 HTML 表格

转载 作者：可可西里 更新时间：2023-11-01 14:55:43 26 4
gpt4 key购买 nike

如标题所示，我想要一个 HTML 表格，允许其列和行的大小独立于单元格内容。如果行不够高或列不够宽以显示单元格的所有内容，那么该内容应该简单地消失在单元格后面。

我提出了以下解决方案，它在 chrome (17) 和 opera (11.61)、safari (5)、IE (9) 中运行良好，但在 firefox 中运行不正常:

th, td {
    position: relative;
    overflow: hidden;
}

td > span {
    position: absolute;
    top: 0px;
}

th > div {
    position: relative;
}

(设计是这样的，每个 td 只包含一个 span 和任何“真实”内容，就像文本在 td 的 span 内一样。另外，每一行都有一个初始的 th，并且有一个标题行只包含 th 的，并且所有这些 th 都包含一个 div。通过在 th 内设置 DIV 的显式高度和宽度，我可以设置行的宽度和高度。)

以下 HTML 说明了示例:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>test</title>
    <style type="text/css">
      table {
        border-width: 1px;
        border-style: none none solid solid;
      }

      th, td {
        border-width: 1px;
        border-style: solid solid none none;
      }

      th > div {
        height: 18px;
        width: 50px;
      }

      th, td {
        overflow: hidden;
        position: relative;
      }

      td > span {
        position: absolute;
        top:0px;
      }

      th > div {
        position: relative;
      }
    </style>
  </head>
  <body>
    <table
      cellspacing="0"
      cellpadding="0"
      style="font-size: 10pt"
    >
      <thead>
        <tr>
          <th><div>Header0</div></th>
          <th><div>Header1</div></th>
          <th><div style="width:25px">Header2</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th><div>Header1</div></th>
          <td
            style="
              vertical-align: bottom
            "
          >
            <span style="
              font-size:6pt;
              background-color: red;
            ">A</span>
          </td>
          <td>
            <span style="
              font-size:6pt;
              background-color: blue;
            ">B</span>
          </td>
        </tr>
        <tr>
          <th><div>Header2</div></th>
          <td>
            <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">C</span>
          </td>
          <td>
            <span style="
              font-size:30pt;
              background-color: green;
            ">D</span>
          </td>
        </tr>
        <tr>
          <th><div style="height:10px">Header2</div></th>
          <td>
            <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">E</span>
          </td>
          <td>
            <span style="
              font-size:6pt;
              background-color: blue;
            ">F</span>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

这在 chrome 和 opera 中效果很好，它们都相对于 td 定位跨度(这就是为什么我给它们定位:相对)。但是，在 firefox 中，td 的position:relative位置被完全忽略，跨度相对于具有绝对或相对位置的表行上方的第一个祖先定位。所以只有上面的规则，跨度的顶部粘在文档主体的顶部，如果我添加:

table {
    position:relative
}

跨度的顶部粘在 table 的顶部。但是 position:relative 应用于 tr 或 td 似乎被完全忽略了。

任何对有效解决方案的见解都将不胜感激。

更新Firefox 根本不支持 position:relative 在表格单元格上。参见 https://bugzilla.mozilla.org/show_bug.cgi?id=35168#c11 .国际海事组织，这是一个错误。尽管有人认为“标准”说这个设置的行为是未定义的，但其他浏览器似乎在以一种明智和有用的方式实现这个方面没有任何困难，所以从我的 Angular 来看，似乎没有任何充分的理由为什么 firefox 想要忽略这种事实上的行为。

经过一些实验，我提出了两种替代解决方案 - 它们都不是完美的 - 对于面临同样问题的其他人可能有用也可能没有用。

1) 对表格单元格使用 position:static 几乎可以解决 firefox 中的问题(无需更改所有其他提到的浏览器中的行为)。但是，如果您确实将 position:static 指定给表格单元格，那么当您在表格单元格上设置 text-align:right 时，就会出现一个新问题。虽然这在所有其他提到的浏览器中再次正常工作(它们将跨度呈现在单元格内的右侧)，但 firefox 再次显示不同的行为，并将跨度显示在单元格的右侧外部。

2) 在表格上使用 table-layout:fixed ，将单元格内容直接放在单元格中(而不是单独的 span 或 div 中)。然后，您可以在第 th 个元素的样式中显式设置宽度和高度(请注意，在第 th 个元素内设置 div 的宽度/高度是不够的 - 您确实需要直接在第 th 个上执行此操作。这似乎google docs 电子表格采用的方法。这种方法允许单元格内容比单元格宽。但是，您不能使表格行的高度低于单元格内容的高度。

最佳答案

Firefox 不支持 position:relative 表格元素。看到这个答案:Does Firefox support position: relative on table elements?

解决方法是用相对定位的 div 填充所有表格单元格。正如您所说，问题在于您必须单独调整所有这些 div 的大小。您可以使用一些棘手的 CSS 来简化此操作:

  .atable th:nth-child(3) > div,
  .atable td:nth-child(3) > div {
    width:25px;
  }

  .atable tr:nth-child(3) div {
    height:10px
  }

http://jsfiddle.net/chad/9XwyX/2/

或者，您可以向 div 添加类来表示每一行和每一列:

http://jsfiddle.net/chad/9XwyX/3/

两者都不是特别干净，但它们在 Firefox 中工作。

关于具有可独立于单元格内容调整大小的行和列的 HTML 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9446137/

26 4 0
文章推荐： c++ - 链接 boost 库时出现另一个 "undefined reference"错误
文章推荐： html - 使用 css 样式化事件 anchor 元素
文章推荐： ruby-on-rails - 使用 rspec+webrat 检查属性内容
文章推荐： C++函数类型？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com