Html div中的表格在响应模式下超出容器_Html_Css_Twitter Bootstrap

Html div中的表格在响应模式下超出容器

html css twitter-bootstrap

Html div中的表格在响应模式下超出容器,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有一张位于div内部的表。在响应模式下，该表位于div区域之外，如下所示： <!DOCTYPE html> <html> <head> <style> .slice-table { vertical-align: middle; display: block; cursor: pointer; cursor: grab;

我有一张位于div内部的表。在响应模式下，该表位于div区域之外，如下所示：

<!DOCTYPE html>
<html>
<head>
    <style>
        .slice-table {
            vertical-align: middle;
            display: block;
            cursor: pointer;
            cursor: grab;
        }

        .inner {
            width: 50%;
            margin: 0 auto;
            font-size: 6px;
            color: #FFFFFF;
        }

        .spacer-20 {
            font-size: 0;
            height: 20px;
            line-height: 0;
        }
    </style>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>


    <div class="st-container">
        <div class="st-content" id="content">
            <div class="st-content-inner">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <!-- Progress table -->
                                    <div>
                                        <div class="inner">
                                            <table id="Table_01" class="table-responsive" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td colspan="38">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_01.png' %}" width="400" height="4" alt="">
                                                    </td>
                                                    <td>
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/spacer.gif' %}" width="1" height="4" alt="">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td rowspan="48">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_02.png' %}" width="2" height="395" alt="">
                                                    </td>
                                                    <td width="61" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
                                                    <td rowspan="5">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_04.png' %}" width="2" height="50" alt="">
                                                    </td>
                                                    <td width="58" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 2</td>
                                                    <td colspan="27">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_06.png' %}" width="212" height="2" alt="">
                                                    </td>
                                                    <td width="62" height="206" colspan="2" rowspan="24" align="center" valign="middle" bgcolor="#75904A">Cell 3</td>
                                                    <td rowspan="48">
                                                        <img class="slice-table img-responsive" src="#" width="3" height="395" alt="">
                                                    </td>
                                                    <td>
                                                        <img class="slice-table img-responsive" src="#" width="1" height="2" alt="">
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



</body>
</html>

我正在尝试让桌子在响应模式下移动到中心我希望它看起来像这样：

当前，当屏幕宽度变小时，表格将无法靠近左侧以容纳容器。我不想把桌子放在容器外面

有人知道我怎样才能做到这一点吗

.slice表{
垂直对齐：中间对齐；
显示：块；
光标：指针；
光标：手；
}
.内部{
宽度：50%；
保证金：0自动；
字体大小：6px；
颜色：#FFFFFF；
}
.垫片-20{
字号：0；
高度：20px；
线高：0；
}


第1单元

在您的图像上尝试img响应类，如下所示：

<!DOCTYPE html>
<html>
<head>
    <style>
        .slice-table {
            vertical-align: middle;
            display: block;
            cursor: pointer;
            cursor: grab;
        }

        .inner {
            width: 50%;
            margin: 0 auto;
            font-size: 6px;
            color: #FFFFFF;
        }

        .spacer-20 {
            font-size: 0;
            height: 20px;
            line-height: 0;
        }
    </style>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>


    <div class="st-container">
        <div class="st-content" id="content">
            <div class="st-content-inner">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <!-- Progress table -->
                                    <div>
                                        <div class="inner">
                                            <table id="Table_01" class="table-responsive" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td colspan="38">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_01.png' %}" width="400" height="4" alt="">
                                                    </td>
                                                    <td>
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/spacer.gif' %}" width="1" height="4" alt="">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td rowspan="48">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_02.png' %}" width="2" height="395" alt="">
                                                    </td>
                                                    <td width="61" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
                                                    <td rowspan="5">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_04.png' %}" width="2" height="50" alt="">
                                                    </td>
                                                    <td width="58" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 2</td>
                                                    <td colspan="27">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_06.png' %}" width="212" height="2" alt="">
                                                    </td>
                                                    <td width="62" height="206" colspan="2" rowspan="24" align="center" valign="middle" bgcolor="#75904A">Cell 3</td>
                                                    <td rowspan="48">
                                                        <img class="slice-table img-responsive" src="#" width="3" height="395" alt="">
                                                    </td>
                                                    <td>
                                                        <img class="slice-table img-responsive" src="#" width="1" height="2" alt="">
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



</body>
</html>


.切片台{
垂直对齐：中间对齐；
显示：块；
光标：指针；
光标：抓取；
}
.内部{
宽度：50%；
保证金：0自动；
字体大小：6px；
颜色：#FFFFFF；
}
.垫片-20{
字号：0；
高度：20px；
线高：0；
}
第1单元
第2单元
第三单元

如何添加

overflow-x: auto;

到div.internal元素。虽然我不确定这是否是你想要的。你的CSS应该是

.inner {
  width: 50%;
  margin: 0 auto;
  font-size: 6px;
  color: #FFFFFF;
  overflow-x: auto; // When the table exceeds the size of the container, the container creates a scrollbar.
}

为了演示起见，我冒昧添加了第二个单元格

.slice表{
垂直对齐：中间对齐；
显示：块；
光标：指针；
光标：手；
}
.内部{
宽度：50%；
保证金：0自动；
字体大小：6px；
颜色：#FFFFFF；
溢出-x：自动；
}
.垫片-20{
字号：0；
高度：20px；
线高：0；
}


第1单元
第2单元

哦，伙计，从哪里开始呢。。。你们可以为有空闲时间的人们提供一把小提琴或密码笔来修补它。在overflow-x上做得好。