隐藏div的本机滚动条时表宽度未更新

时间：2018-12-13 13:18:23

标签： html css

我需要为我的项目设置一些棘手的布局。在这种布局中，我有容器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>

Screenshot

5 个答案:

答案 0 :(得分：6)

<table>

有问题的代码有错字：

<table style='width:100%;border-collapse: 合拢 ;table-layout: fixed;' >

从而将<table>呈现为默认样式：

border-collapse: separate;

表1和表2

演示1 有两个<table>s：

表1

  • 与border-collapse: collapse
  • 更改了.content1 {width:105%;...}
  • 更改了.container1 {width:250px;...}

表2

  • 使用border-collapse: separate或默认
  • 更改了<table style="width:105%;...">
  • 更改了.container2 {width:262px;...}

.container1和.container2的宽度已更改为固定宽度，以便与列的固定宽度一致（每个都在width:50px处）。

表3和表4

演示2 有两个<table>s：

表3

  • 与border-collapse: collapse
  • 更改了.contentA {width:calc(100% + 17px;...}
  • 更改了.containerA {width:calc(70% + 17px;...}

表4

  • 使用border-collapse: separate或默认
  • 更改了.contentA {width:calc(100% + 17px;...}
  • 更改了.containerA {width:calc(70% + 17px;...}

这些<table>s的宽度是动态的，使用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>

答案 1 :(得分：4)

从padding-right: 17px;删除content

如果您不想滚动，请使用hight:100%并删除overflow-y: scroll; 

.content { 
box-sizing: content-box;
border: 1px solid grey;
height: 100%;
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>

答案 2 :(得分：0)

尝试此操作以隐藏滚动条

.content::-webkit-scrollbar, .content::-moz-scrollbar, .content::-ms-scrollbar  {
    display: none;
}

答案 3 :(得分：0)

当您使用padding-right：17px时，表格的父宽度大于100％。因此，表格宽度应与父宽度相同。 解决方案：： 

.table{
    width:calc(100% + 16px);
}


.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:calc(100% + 16px);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>

答案 4 :(得分：0)

仅需混淆，您就可以找到使用javascript动态呈现html元素的方法！

相关问题
最新问题