css - 垂直滚动正在改变百分比宽度-6ren

css - 垂直滚动正在改变百分比宽度

转载作者：太空宇宙更新时间：2023-11-04 11:39:47

26

4

我在表格上有一个百分比宽度和一个 overflow-y:auto。当滚动出现时，表格的宽度被推开。我怎样才能使表格具有相同的宽度(有或没有滚动条)谢谢!

这是我的CSS:

    html,body{height:99%;}
.table1
 { margin: 0; 
  padding: 0; 
  border-collapse: collapse; 
  width:98.1%; 
  height:5%; 
  text-align: box-sizing: border-box; 
  left;table-layout: fixed; 
 }
.table1 td
 { border-collapse: collapse;
  background-color: #EAEAEA;
  border: 1px solid lightgrey;
  padding-left: 3px;
 }
#container
 { overflow-y:auto; 
  height:20%; 
  width:100%;left:0;  
  right:0;
 }

.table2
 { margin: 0; 
  padding: 0; 
  border-collapse: collapse; 
  left:0; 
  right:0; 
  min-width:98.1%; 
  box-sizing: border-box;
  table-layout: fixed;
 }
 .table2 tr 
  { height:30px;
  }
.table2 td 
 { margin: 0; 
  border-collapse: collapse;
  border: 1px solid lightgrey; 
  border-top:none; 
  border-right: 1px solid lightgrey;
 }

这是我的 HTML:

<html>
  <head>
  </head>

  <body  BGCOLOR="#EAEAEA" TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 >
  <table class ="table1">
    <colgroup>
      <col width="20%"/>
      <col width="50%"/>
      <col width="30%"/>
    </colgroup>
    <tbody>
      <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
      </tr>
    </tbody>
  </table>

  <div id="container">
  <table class="table2" BGCOLOR="WHITE">
    <colgroup>
      <col width="20%"/>
      <col width="50%"/>
      <col width="30%"/>
    </colgroup>
    <tbody>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

最佳答案

试试这个:

html,body{height:99%;}
.table1
 { margin: 0; 
  padding: 0; 
  border-collapse: collapse; 
  width:calc(100% - 17px);
  height:5%; 
  text-align:left; 
 }
.table1 td
 { border-collapse: collapse;
  background-color: #EAEAEA;
  border: 1px solid lightgrey;
  padding-left: 3px;
 }
#container
 { overflow-y:scroll;
  height:20%; 
  width:100%;left:0;  
  right:0;
 }

.table2
 { margin: 0; 
  padding: 0; 
  border-collapse: collapse; 
  left:0; 
  right:0; 
  width:100%;
      box-sizing: border-box;
  table-layout: fixed;

 }
 .table2 tr 
  { height:30px;
  }
.table2 td 
 { 

  border: 1px solid lightgrey; 
  border-top:none; 
  border-right: 1px solid lightgrey;
 }

您可以在我使用 width:calc(100% - 17px); 的地方看到 container 的变化。 container 的 Width 减少了 17px(scroller 的宽度)，但我也改变了这个 溢出-y:滚动；。现在，所有行都将对齐 :)

在 .table1 td 和 .table2 td 中不需要 border-collapse...和 overflow也是。

重点在于 width:calc(100% - XYpx)，在本例中为 17px(滚动条的宽度)

希望这就是您所需要的。

有Fiddle example

更新:

我创建了两个 js 函数。首先检查 container 元素中是否有 scrollbar 并调整他的 width 。第二个函数仅用于测试，模拟在这种情况下 height 是否更改。

实际上，当您添加更多行时，其数量超过 container height，您的表将适应。或者也可以在调整大小的浏览器上。

在你的情况下，你不需要第二个名为 chVl() 的 js 函数，就像我之前说的那样，它只是为了测试。

Try this Fiddle now

关于css - 垂直滚动正在改变百分比宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31439860/

26

4

0

文章推荐： c++ - Visual Studio 2013 中右值引用的初始化捕获

文章推荐： linux - GNOME 剪贴板是否具有与数据关联的 MIME 类型？

文章推荐： linux - Cron 压缩文件

language-agnostic - 百分比、百分比、分数、比例因子的术语？
我的函数概念上都返回相同的东西，但结果可以采用不同的形式: function GetThingy() 有四个不同的函数，每个可以返回不同的东西: 0.071(代表增长 7.1% 的 float 值)
Java 百分比
这个问题在这里已经有了答案: Int division: Why is the result of 1/3 == 0? (19 个回答) 关闭 4 年前。有什么方法可以计算(例如)120 的 50
范围格式中每个单元格的 VBA 百分比
我四处寻找这个，它看起来很简单，但我无法让它工作。我有一张表格，其中一列需要格式化为百分比。下面是我的代码，但它没有格式化单元格，它只是将它们保留为小数。我想这是因为 cell ，即使声明为范围，
WPF - margin 百分比
我刚刚开始使用 WPF。从那以后，我开始关注造型系统。我来自 CSS 背景，我想以百分比设置边距。当前值以像素为单位
真实列的 SQL 百分比
我有一个表，其中每一行都有一个描述字段和一个 bool 值。我正在尝试编写一个查询，我可以在其中按每个相应的描述进行分组，并查看 bool 值为真的次数百分比。示例表: PID Gen
caching - OrientDB中的磁盘缓存如何按读缓存和写缓存分开(百分比)
我从文档中发现，考虑到 orientdb 100% 使用磁盘缓存，它使用的最大大小为 70% 用于读取缓存，30% 用于写入缓存 ( http://orientdb.com/docs/last/plo
Docker CPU 百分比
有什么方法可以获取 docker 容器内部而不是外部的 cpu 百分比吗？! docker stats DOCKER_ID 显示的百分比正是我需要的，但我需要它作为变量。我需要获取容器本身内部的 cp
r - 计算数据集每列的比例(百分比)
我正在尝试计算数据集每列中类别的比例(百分比)。示例数据: df <- data.frame( "Size" = c("Y","N","N","Y","Y"), "Type" =
SQL:你用什么在数据库中存储比率(百分比)？
我应该使用小数还是 float 在数据库中存储比率？特别是在 SQL2005 中。最佳答案这取决于您对准确性的需求。如果您可以容忍来自存储 float 的 IEEE 方法的典型错误，则使用 flo
Lua:随机:百分比
我正在创建一个游戏，目前必须处理一些math.random问题。我的Lua能力不是那么强，你觉得怎么样您能制定一个使用 math.random 和给定百分比的算法吗？我的意思是这样的函数: fu
动态计算的 SQL 百分比
如何在SQL中动态计算百分比？假设您有一个名为 Classes 的下表: ClassSession StudentName -------------------------------
javascript - 掩码输入数字 - 百分比
如何通过 jQuery 创建具有百分比的数字掩码输入？我是否让输入仅接受三个数字，并在用户完成输入时在数字后添加百分号(keyup)？我不使用插件。示例:1% 或 30% 或 99% 或 100%
Python-删除字典对的比例/百分比
我正在尝试构建一个工具，可以突出显示具有最高介数中心性的社交网络节点。我将所有网络节点的测量值计算到字典中，按顺序对字典进行排序，然后仅保留前 3 对。我希望这个工具是可扩展的，所以我想保留前 10
mysql - 同列计算/百分比
MYSQL 中的人员如何将一个日期条目和分数的用户百分比与另一个日期条目和分数进行比较，从而有效地返回从一个日期到另一个日期的用户百分比增加情况？几天来我一直在试图解决这个问题，但我已经没有想法了，
mysql - SQL - 百分比
我需要进行查询，结果是百分比。我现在的查询如下所示: select COUNT(CREATE_WEEKDAY), CREATE_WEEKDAY, COUNT(CREATE
javascript - AJAX图片上传时生成加载条/百分比
我有一个图像上传功能，其工作原理如下: $('.update-insertimage-form').submit(function() { $(".submit-newupdate-btn").add
Html - 容器中的图像高度(百分比)
我的问题很简单，但我仍然找不到这个问题的答案... 假设我们有两个包含图像的容器。我们有类似的东西 #containera { width: 50%; height: 50%; backgr
其他元素的 CSS 百分比
是否可以将 CSS 尺寸指定为除其父元素之外的另一个元素的百分比？例如，我想将 div 的 border-radius 指定为 div 宽度的 10%。但是，border-radius: 10% 在
html - 输入和提交按钮的大小(百分比)
我正在尝试设置按钮的大小并以百分比进行编辑但是这个的线性大小是不同的。为什么？最佳答案您好，问题出在属性 box-sizing 上.默认为 input type
html - 如何将数据可见范围更改为 % 百分比
我将它用于我的页眉，该页眉在一页上下滚动页面中发生变化。我注意到它没有响应，所以我想问你是否知道一种使它响应的方法。就像将 0-690 更改为百分比，以便它可以在移动设备和电视屏幕上使用。 HTML

首页

博学

6Ren·AI

商城

css - 垂直滚动正在改变百分比宽度