引导程序中的响应式表问题 [英] Responsive table issues in bootstrap

问题描述

我试图让我的表在bootstrap响应。我的问题是，当窗口大小变小...我必须滚动页面本身，而不是表格。我想让它滚动而不是滚动页面。我在引导程序中使用了响应式样式的响应表格

HTML：

 < div class =wrapper> 
< div class =main> 
< div class =table-responsive> 
< table class =tableid =roleTable> 
< thead> 
< tr> 
< th>用户< / th> 
< th>电子邮件< / th> 
< th>电话< / th> 
< th>选项< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr id ={{this.uid}}> 
< td>名称1< / td> 
< td>电子邮件1< / td> 
< td>电话号码1< / td> 
< td> 
< div class =dropdown> 
< button class =btn btn-primary dropdown-toggletype =buttondata-toggle =dropdown>请选择
< span class =caret>< /跨度>< /按钮> 
< ul class =dropdown-menu> 
< li>< a href =＃>选项1< / a>< / li> 
< li>< a href =＃>选项2< / a>< / li> 
< li>< a href =＃>选项3< / a>< / li> 
< / ul> 
< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
< / div> 
< / div> 
  

CSS：

  html，body，.wrapper {
 margin：0; 
 padding：0; 
身高：100％; 
宽度：100％; 
} 
 
 .wrapper {
 display：table; 
 max-width：500px; 
 margin：0 auto; 
} 
 
 .wrapper .main {
 display：table-cell; 
保证金：0; 
 padding：0; 
 text-align：center; 
 vertical-align：middle; 
} 
  

更新： b

我使用页面上的表格垂直对齐页面上的内容。

JSFiddle Demo

可以使用溢出来实现这一点。

只需添加 table tbody {overflow：auto; }

https：/ /jsfiddle.net/f061pk27/1/

I am trying to make my table in bootstrap responsive. My issue is that when the window size becomes smaller... I have to scroll the page itself instead of the table. I want to make it so the table scrolls not the page. I have used responsive styling for responsive tables in bootstrap

HTML:

<div class="wrapper">
  <div class="main">
    <div class="table-responsive">
      <table class="table" id="roleTable">
        <thead>
          <tr>
            <th>User</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Options</th>
          </tr>
        </thead>
        <tbody>
          <tr id="{{this.uid}}">
            <td>Name 1</td>
            <td>Email 1</td>
            <td>Phone Number 1</td>
            <td>
              <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Please Select
                  <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Option 1</a></li>
                  <li><a href="#">Option 2</a></li>
                  <li><a href="#">Option 3</a></li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS:

html, body, .wrapper {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.wrapper {
  display: table;
  max-width: 500px;
  margin: 0 auto;
}

.wrapper .main {
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

Update:

I am using tables on the page to vertically align the content on the page.

JSFiddle Demo

解决方案

You could achieve this using overflow.

Just add table tbody { overflow: auto; }

https://jsfiddle.net/f061pk27/1/

这篇关于引导程序中的响应式表问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！