横跨整个身体的桌子

时间：2018-03-10 15:53:04

标签： html css

我有一个HTML页面，里面只有一个表格，我希望它跨越整个主体，并且当需要水平或垂直滚动​​时有滚动条。

这就是我对表格样式所具有的：

table {
  box-shadow: inset 0 0 10px #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
<table>
  <tr>
    <td>test</td>
  </tr>
</table>

Fiddle Link

默认情况下，表格列会展开/缩小以适合内容（请参阅我原来的jsfiddle）。我想保持这种行为，但是当列太多时允许水平滚动，而当行太多时允许垂直滚动。框阴影用于指示表格的边缘，我希望它至少是视口的100％（当它经过时带有滚动条）

如您所见，该表不会跨越整个视口 - 我哪里出错了？

3 个答案:

答案 0 :(得分：0)

将height: 100vh; vh 视口高度添加到CSS中的<table>标记。

编辑：使用overflow-y 

body {
  margin: 0;
  padding: 0;
  background-color: orange;
}

table {
  box-shadow: inset 0 0 10px #000;
  height: 100vh;
  overflow: scroll;
}

td{
    background-color:red; 
    width: auto;
}

.box{
   overflow: scroll;
   height: 100vh;
   background-color: green;
   width: 15vw;
}

.text{ float:right;}
<div class="box">
  <table>
  <tr>
    <th>ID</th>
  </tr>
  <tr>
    <td>#1</td>
  </tr>
  <tr>
    <td>#2</td>
  </tr>
  <tr>
    <td>#3</td>
  </tr>
  <tr>
    <td>#4</td>
  </tr>
  <tr>
    <td>#5</td>
  </tr>
  <tr>
    <td>#6</td>
  </tr>
  <tr>
    <td>#7</td>
  </tr>
  <tr>
    <td>#8</td>
  </tr>
  <tr>
    <td>#9</td>
  </tr>
  <tr>
    <td>#10</td>
  </tr>
</table>
</div>

<span class="text"> example text in background </span>

希望这会有所帮助。红色背景是这样你可以看到细胞的跨度。橙色背景为body，green背景为表格的父标记。如果您愿意，可以添加更多列。

答案 1 :(得分：0)

希望这会有所帮助

＆＃13;
＆＃13; 
table {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: grey;
  box-shadow: inset 0 0 10px #000;
  overflow: auto; /* Scroll bar will add if it goes to long .. */
}
＆＃13; 
<table>
  <tr>
    <td>Scroll bar will add if the content goes to long ..</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

因为overflow不适用于table ...因此您需要将表格包装成两个div ...

1 ...如果表格内容超出了视口宽度，则外部div .wrapper适用于overflow:auto

2 ...如果内容小于视口，则内部div .inner用于使min-width和max-width值等于视口宽度将display:inline-block应用于该div，以便在内容超过视口宽度时可以扩展其宽度

Stack Snippet

＆＃13;
＆＃13; 
body {
  margin: 0;
}

div.wrapper {
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

div.inner {
  box-shadow: inset 0 0 30px #000;
  font: 13px Verdana;
  display: inline-block;
  min-height: 100vh;
  min-width: 100vw;
  vertical-align: top;
}

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid;
  padding: 10px;
}
＆＃13; 
<div class="wrapper">
  <div class="inner">
    <table>
      <tr>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
        <th>Id</th>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
      <tr>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
        <td>Some Id</td>
      </tr>
    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题