javascript - 动态 html 表格中的宽度差异

标签 javascript jquery html css

我面临的问题如下。我写了一个 JavaScript 函数来制作一个可滚动的表格。我使用 JavaScript 的原因是为了避免我在使用 CSS 时遇到的跨浏览器兼容性问题。由于表行的数量非常有限，最多 40 行，因此使用 JavaScript 的开销似乎不是问题。代码显示在这里:

function correctTableHeaderSize(){
    var count = 0;
    var sizes = [];
    $("#table").find("th").each(function(){
        sizes[count] = $(this)[0].clientWidth;
        count++;
    });
    $("#table").find("tbody").children("tr").each(function(){   
        counter=0;
        $(this).children("td").each(function(){
            if($(this).next().is("td")){            
                $(this).css('width',sizes[counter]);
                counter++;
            }
        });
    });
    $("#table").prop("hidden",false);
}

它的作用:

  1. 获取所有表头的宽度(id为“table”的表)并将它们存储在一个数组中
  2. 对于表格正文中的所有行，获取子单元格并设置宽度以匹配其相应表格标题的宽度。

在我注意到一个烦人的事实之前，它一直工作得很好，它开始变成一个严重的问题。表格标题和下方相应的单元格大小不同。它们相差几个像素。 header 越宽，这种差异就越大。

使用 Firebug 我注意到，例如，一个宽度为 30% 的元素，用内联 css 定义被转换为 406px 的滚动宽度，这也是我在包含这些宽度的数组中找到的值，但是在 JavaScript 函数完成后，相应表格单元格的滚动宽度为 419px，而应用于此元素的 css 显示宽度为 406px。在某处，以某种方式添加了 13px，尽管 th 和 td 的边距和填充设置为 0。我检查滚动宽度的原因是基于 this主题解释各种宽度属性，这样我确定我考虑了总尺寸。有关代码示例，请参阅代码片段。

function correctTableColumns() {
    var count = 0;
    var sizes = [];
    $("#table").find("th").each(function() {
      sizes[count] = $(this)[0].clientWidth;
      count++;
    });
    $("#table").find("tbody").children("tr").each(function() {
      counter = 0;
      $(this).children("td").each(function() {
        if ($(this).next().is("td")) { //this to let the last cell take al available space, this way the scrollbar width is not an issue
          $(this).css('width', sizes[counter]);
          counter++;
        }
      });
    });
    $("#table").prop("hidden", false);
 }
table.scrollTable {
  width: 100%;
}
table.scrollTable thead,
table.scrollTable tbody {
  float: left;
  width: 100%;
}
table.scrollTable tbody {
  overflow-y: scroll;
  height: 50px;
  width: 100%;
}
table.scrollTable th {
  white-space: normal;
  margin: 0px;
  padding: 0px;
}
table.scrollTable td {
  margin: 0px;
  padding: 0px;
}
table.scrollTable tr {
  width: 100%;
  display: table;
}
table.scrollTable thead {
  overflow: false;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <table id="table" class="scrollTable" bgcolor="#94BAE7">
    <THEAD>
      <TR width=\ "100%\">
        <TH bgcolor="#CCFF99" width="8%">Col1</TH>
        <TH bgcolor="#FFA347" width="8%">Col2</TH>
        <TH bgcolor="#CCFF99" width="30%">Col3</TH>
        <TH bgcolor="#FFA347" width="2%">Col4</TH>
        <TH bgcolor="#CCFF99" width="8%">Col5</TH>
        <TH bgcolor="#FFA347" width="8%">Col6</TH>
        <TH bgcolor="#CCFF99" width="2%">Col7</TH>
        <TH bgcolor="#FFA347" width="30%">Col8</TH>
        <TH bgcolor="#CCFF99" width="3%">Col9</TH>
        <TH></TH>
      </TR>
    </THEAD>
    <TBODY>
      <tr>
        <td bgcolor="#CCFF99">10</td>
        <td bgcolor="#FFA347">10</td>
        <td bgcolor="#CCFF99">I am short</td>
        <td bgcolor="#FFA347">100</td>
        <td bgcolor="#CCFF99">100</td>
        <td bgcolor="#FFA347">100</td>
        <td bgcolor="#CCFF99">100</td>
        <td bgcolor="#FFA347">10</td>
        <td bgcolor="#CCFF99">foo</td>
      </tr>
      <tr>
        <td bgcolor="#CCFF99">10</td>
        <td bgcolor="#FFA347">10</td>
        <td bgcolor="#CCFF99">I am a longer sentence</td>
        <td bgcolor="#FFA347">100</td>
        <td bgcolor="#CCFF99">100</td>
        <td bgcolor="#FFA347">100</td>
        <td bgcolor="#CCFF99">100</td>
        <td bgcolor="#FFA347">10</td>
        <td bgcolor="#CCFF99">foo</td>
      </tr>
    </TBODY>
  </table>
  <input type="button" value="Repair this table" onclick="correctTableColumns();"> 
 </body>
</html>

有谁知道这种微小的宽度差异是如何可能的？

解决方案

问题确实是一个列的宽度，但这个问题的根源不是太长的文本，而是每个 tr 末尾隐藏的 td。这包含一个图像，如果满足特定条件就会显示该图像。

这个隐藏的 td 应该占用了 tr 中的剩余空间，但由于它是隐藏的，所以它根本没有占用空间。然后剩余的空间被其他 td 填满，它们都得到了剩余空间的一部分。因此每个 td 上的尺寸差异很小。通过使图像而不是父 td 隐藏，这个问题得到了解决。

由于 Raidri 的评论解决了代码段中的问题并让我走上了正确的轨道，所以我对他的回答投了赞成票(但我没有足够的权利这样做，我很抱歉)。谢谢

最佳答案

您正试图将带有 foo 的单元格的宽度设置得如此之小以至于它不能包含文本。因此，浏览器会自动将其变大，而其他列/单元格在此过程中会变小。如果您一开始就给该列更多的宽度，一切都会起作用:

function correctTableColumns() {
    var count = 0;
    var sizes = [];
    $("#table").find("th").each(function() {
      sizes[count] = $(this).css('width');
      count++;
    });
    $("#table").find("tbody").children("tr").each(function() {
      counter = 0;
      $(this).children("td").each(function() {
        if ($(this).next().is("td")) { //this to let the last cell take al available space, this way the scrollbar width is not an issue
          $(this).css('width', sizes[counter]);
          counter++;
        }
      });
    });
    $("#table").prop("hidden", false);
 }
table.scrollTable {
  width: 100%;
}
table.scrollTable thead,
table.scrollTable tbody {
  float: left;
  width: 100%;
}
table.scrollTable tbody {
  overflow-y: scroll;
  height: 50px;
  width: 100%;
}
table.scrollTable th {
  white-space: normal;
  margin: 0px;
  padding: 0px;
}
table.scrollTable td {
  margin: 0px;
  padding: 0px;
}
table.scrollTable tr {
  width: 100%;
  display: table;
}
table.scrollTable thead {
  overflow: false;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <table id="table" class="scrollTable" bgcolor="#94BAE7">
    <THEAD>
      <TR width=\ "100%\">
        <TH bgcolor="#CCFF99" width="8%">Col1</TH>
        <TH bgcolor="#FFA347" width="8%">Col2</TH>
        <TH bgcolor="#CCFF99" width="30%">Col3</TH>
        <TH bgcolor="#FFA347" width="2%">Col4</TH>
        <TH bgcolor="#CCFF99" width="8%">Col5</TH>
        <TH bgcolor="#FFA347" width="8%">Col6</TH>
        <TH bgcolor="#CCFF99" width="2%">Col7</TH>
        <TH bgcolor="#FFA347" width="25%">Col8</TH>
        <TH bgcolor="#CCFF99" width="10%">Col9</TH>
        <TH></TH>
      </TR>
    </THEAD>
    <TBODY>
      <tr>
        <td bgcolor="#CCFF99">10</td>
        <td bgcolor="#FFA347">10</td>
        <td bgcolor="#CCFF99">I am short</td>
        <td bgcolor="#FFA347">100</td>
        <td bgcolor="#CCFF99">100</td>
        <td bgcolor="#FFA347">100</td>
        <td bgcolor="#CCFF99">100</td>
        <td bgcolor="#FFA347">10</td>
        <td bgcolor="#CCFF99">foo</td>
      </tr>
      <tr>
        <td bgcolor="#CCFF99">10</td>
        <td bgcolor="#FFA347">10</td>
        <td bgcolor="#CCFF99">I am a longer sentence</td>
        <td bgcolor="#FFA347">100</td>
        <td bgcolor="#CCFF99">100</td>
        <td bgcolor="#FFA347">100</td>
        <td bgcolor="#CCFF99">100</td>
        <td bgcolor="#FFA347">10</td>
        <td bgcolor="#CCFF99">foo</td>
      </tr>
    </TBODY>
  </table>
  <input type="button" value="Repair this table" onclick="correctTableColumns();"> 
 </body>
</html>

关于javascript - 动态 html 表格中的宽度差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29512118/

上一篇：javascript - 如何修复旋转图像与 html 和 js 的重叠？

下一篇：css - 在 Angularjs 中为自定义复选框创建自定义指令

相关文章：

javascript - 替换图像 src 和 href onclick

javascript - 如何在 DOM 中的克隆/插入元素上触发事件？

jquery - CSS 在溢出设置为隐藏时删除水平滚动

javascript - 用文字制作三态切换

javascript - Django Ajax 返回错误消息

javascript - 变量内的代码在没有被调用的情况下触发？

html - 选择表格内和 div 内的图像

php - 嵌套 div 的重叠背景图像

javascript - 在使用 CefSharp 加载远程 JavaScript 时修改它们？

javascript - 在 jQuery 中上传前单击预览按钮时显示图像

©2024 IT工具网  联系我们