div内のテーブルが応答モードでコンテナの外に出る

divの内部にテーブルがあります。応答モードでは、テーブルには、divのエリアの外に行くとこのようになります：私は、応答モードの中央にテーブルの動きを持ってしようとしていますdiv内のテーブルが応答モードでコンテナの外に出る

。私はそれが次のようになりたい：スクリーンの幅が小さい取得するときに現在

、テーブルは、コンテナ内に収まるように左に十分近い取得することはできません。私はテーブルをコンテナの外に出たくはありません。

どのように私はこれを達成することができます知っていますか？

.slice-table { 
 
    vertical-align: middle; 
 
    display: block; 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 
.inner { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-size: 6px; 
 
    color: #FFFFFF; 
 
} 
 
.spacer-20 { 
 
    font-size: 0; 
 
    height: 20px; 
 
    line-height: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<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" width="401" height="400" border="0" cellpadding="0" cellspacing="0"> 
 

 
<tr> 
 
\t <td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td> 
 
\t 
 
</tr> 
 

 
</table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-04-19 Atma

ああ男、...雅はフィドルを含めるか、またはそれといじくり回す自由な時間を持つ人々のためcodepenかもしれません。 –

方法div.inner要素に

overflow-x: auto;

の追加について。でも、これがあなたが望むものなのかどうかは分かりません。あなたの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. 
}

私はデモストレーションのために2番目のセルを追加する自由を取っていました。でもこれで開始する

.slice-table { 
 
    vertical-align: middle; 
 
    display: block; 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 
.inner { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-size: 6px; 
 
    color: #FFFFFF; 
 
    overflow-x: auto; 
 
} 
 
.spacer-20 { 
 
    font-size: 0; 
 
    height: 20px; 
 
    line-height: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<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" width="401" height="400" border="0" cellpadding="0" cellspacing="0"> 
 

 
<tr> 
 
\t <td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td> 
 
    <td width="401" height="400" align="center" valign="middle" bgcolor="red">Cell 2</td> 
 
\t 
 
</tr> 
 

 
</table> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-04-19 20:04:44

このようなあなたのイメージの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>

出典

2016-04-19 19:57:24

div内のテーブルが応答モードでコンテナの外に出る

答えて

関連する問題