html – 当我隐藏div的本机滚动条时,表宽度未更新

概述我的项目需要一些棘手的布局.在这个布局中,我有容器div和100％宽度的表.我想隐藏div元素的垂直滚动条,但是这个div的内容可以通过鼠标滚轮滚动.为此我添加了样式来隐藏原生滚动条.当表宽度大于容器宽度时,它工作正常.如果表的容量小于容器,则表没有使用容器div正确拉伸.我已经为表分配了100％的宽度,但是表格渲染为完整的div. .content { overflow-y: scroll; 我的项目需要一些棘手的布局.在这个布局中,我有容器div和100％宽度的表.我想隐藏div元素的垂直滚动条,但是这个div的内容可以通过鼠标滚轮滚动.为此我添加了样式来隐藏原生滚动条.当表宽度大于容器宽度时,它工作正常.如果表的容量小于容器,则表没有使用容器div正确拉伸.我已经为表分配了100％的宽度,但是表格渲染为完整的div.

.content {  overflow-y: scroll;  padding-right: 17px;  Box-sizing: content-Box;  border: 1px solID grey;  height: 80px;  wIDth: 100%;}.container {  wIDth: 70%;  border: 1px solID grey;  overflow: hIDden;}td {  border: 1px solID grey;}

<div class='container'>  <div class='content'>    <table style='wIDth: 100%; border-collapse: collpase; table-layout: fixed;'>      <colgroup>        <col style='wIDth: 50px;'>        <col style='wIDth: 50px;'>        <col style='wIDth: 50px;'>        <col style='wIDth: 50px;'>        <col style='wIDth: 50px;'>      </colgroup>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>    </table>  </div></div>

解决方法 <表>

提供的代码有拼写错误：

< table style ='wIDth：100％; border-collapse：collpase; table-layout：fixed;' > 从而呈现< table>到默认样式：

边界崩溃：分开;

表1和表1表2

演示1有两个< table> s：

表格1

>边界崩溃：崩溃
>已更改.content1 {wIDth：105％; …}
>已更改.container1 {wIDth：250px; …}

表2

> with border-collapse：单独或默认
>已更改< table style =“wIDth：105％; ...”>
>已更改.container2 {wIDth：262px; …}

.container1和.container2的宽度更改为固定宽度,以便与列的固定宽度保持一致(每个宽度：50px).

表3&表4

演示2有两个< table> s：

表3

>边界崩溃：崩溃
>更改.contentA {wIDth：calc(100％17px; …}
>改变了.containerA {wIDth：calc(70％17px; …}

表4

> with border-collapse：单独或默认
>更改.contentA {wIDth：calc(100％17px; …}
>改变了.containerA {wIDth：calc(70％17px; …}

这些< table>在宽度上是动态的,使用calc() css function它补偿滚动条的固定宽度,同时保持相对宽度百分比.

演示1

固定宽度

.content1 {  overflow-y: scroll;  padding-right: 17px;  Box-sizing: content-Box;  border: 1px solID grey;  height: 80px;  /* Changed */  wIDth: 105%;}.content2 {  overflow-y: scroll;  padding-right: 17px;  border: 1px solID grey;  height: 80px;  wIDth: 100%;}.container1 {  /* Changed */  wIDth: 250px;  border: 1px solID grey;  overflow: hIDden;}.container2 {  /* Changed */  wIDth: 262px;  border: 1px solID grey;  overflow: hIDden;}td {  border: 1px solID grey;}

<div class='container1'>  <div class='content1'>    <table style='wIDth:100%;border-collapse: collapse;table-layout: fixed;'>      <caption>table 1</caption>      <colgroup>        <col style='wIDth:50px;'>        <col style='wIDth:50px;'>        <col style='wIDth:50px;'>        <col style='wIDth:50px;'>        <col style='wIDth:50px;'>      </colgroup>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>    </table>  </div></div><hr><div class='container2'>  <div class='content2'>    <!--Changed wIDth-->    <table style='wIDth:105%; table-layout: fixed;'>      <caption>table 2</caption>      <colgroup>        <col style='wIDth:50px;'>        <col style='wIDth:50px;'>        <col style='wIDth:50px;'>        <col style='wIDth:50px;'>        <col style='wIDth:50px;'>      </colgroup>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>    </table>  </div></div>

演示2

动态宽度

.contentA {  overflow-y: scroll;  padding-right: 17px;  Box-sizing: content-Box;  border: 1px solID grey;  height: 80px;  wIDth: calc(100% + 17px);}.containerA {  wIDth: calc(70% + 17px);  border: 1px solID grey;  overflow: hIDden;}td {  border: 1px solID grey;}

<div class='containerA'>  <div class='contentA'>    <table style='wIDth:100%;border-collapse: collapse;table-layout: fixed;'>      <caption>table 3</caption>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>    </table>  </div></div><hr><div class='containerA'>  <div class='contentA'>    <table style='wIDth:100%;table-layout: fixed;'>      <caption>table 4</caption>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>      </tr>    </table>  </div></div>

总结

以上是内存溢出为你收集整理的html – 当我隐藏div的本机滚动条时,表宽度未更新全部内容，希望文章能够帮你解决html – 当我隐藏div的本机滚动条时,表宽度未更新所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。