Question

我正在使用bootstrap 3进行网站项目。我试图创建一个带有响应表的页面，这样当表格太大时我就会有滚动条。我做了一个测试用例：

<div class="row">
  <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end col-12 -->
</div><!-- end row -->

现在，问题在于它没有添加滚动条，它只是将网站扩展到表格的宽度。

请在此处查看截图：

我已经看到它在其他几个网站上工作，所以我做的事情......是错的。

Answer 1

用此

替换您的表格

<div class='table-responsive'> -> <div style="overflow-x:auto;">

Answer 2

确保将表格显示设置为阻止

.table {
   display: block !important;
}

Answer 3

您的代码很好。我只是设置了一个小提琴here。

在那里工作！

我真的复制并粘贴了你的代码。你确定你的Bootstrap的Javascript文件和CSS文件的链接正常吗？

<div class="row">
 <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
   <div class="table-responsive">
    <table class="table">
     <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div><!-- end col-12 -->
  </div><!-- end row -->

Answer 4

我遇到了这个问题，发现它可以在px中为表设置一个宽度，或者设置要显示的表：block。

Answer 5

我做到了。

import RPi.GPIO as GPIO
import time
#from picamera import PiCamera
from time import sleep
from gpiozero import MotionSensor
import smtplib

sender = '*****@gmail.com'
reciever = '*****@gmail.com'

def BlueLED (): #Blue LED Function 

    GPIO.output(27, GPIO.HIGH)
    time.sleep(3)
    GPIO.output(27, GPIO.LOW)


def RedLED (): #Red LED Function

    GPIO.output(22,GPIO.HIGH)
    time.sleep(3)
    GPIO.output(22, GPIO.LOW)

def Buzzer (): #Buzzer Function 

    GPIO.output(17, GPIO. HIGH)
    time.sleep(3)
    GPIO.output(17, GPIO.LOW)


def email(sender,reciever,msg):
    try :
        server = smtplib.SMTP('smtp.gmail.com',587)
        server.ehlo()
        server.starttls()
        server.login(sender,'******')
        server.sendmail(sender,reciever,msg)
        server.close()

        print('Email sent!')

    except :
        print('Error')

try :

    GPIO.setmode(GPIO.BCM)
    #camera = PiCamera()
    pir = MotionSensor(4)
    GPIO.setwarnings(False)


    GPIO.setup(27, GPIO.OUT) #blueLED
    GPIO.setup(22, GPIO.OUT) #redLED
    GPIO.setup(17, GPIO.OUT) #buzzer
    GPIO.setup(18, GPIO.OUT) #tempsensor

    GPIO.setup(21, GPIO.IN, pull_up_down = GPIO.PUD_UP) #entry button

    count = 0

    while True :

        if (pir.motion_detected):
            print('Motion Detected')

            #Calling the buzzer function 
            #Buzzer()

            #The content that is going to be sent via email 


            msg = """Subject : Car Park 

            (Picture) """

            email(sender,reciever,msg)




            print('\nPlease press the button for the gate to open')



            while True :

                if(GPIO.input(21) == False):
                    if (count &lt; 5):
                        BlueLED()
                        print('\nThere are ',(5-count), ' parking spaces empty ')

                    else :
                        RedLED()
                        print('\nSorry but the parking is full')

                    count = count + 1



except Exception as ex :
    print('Error occured',ex)

您将收到xs-screen（来自我的应用程序的示例）：

Answer 6

您可以使用FooTable。它是一个jQuery插件，允许您调整和重新分配表中的数据，以最好地适应您当前的断点。

Answer 7

对我而言，body元素中的'min-width'值会破坏此类的响应能力。

Answer 8

试试这个删除<div class="table-responsive">...</div>
并在<div class="col-12 col-sm-12 col-lg-12">

中移动课程表格

例子

<div class="col-12 col-sm-12 col-lg-12 table-responsive">

这100％工作，但如果不工作移动类表响应早期Div层，在这种情况下，必须删除<div class="col-12 col-sm-12 col-lg-12">。

Answer 9

在我的代码中，我确实添加了一个CSS类：

.modal-body{
  max-width:95vw;
}

布局确实适用于sm

Bootstrap 3表 - 表响应不起作用

9 个答案: