Tabelle in div geht außerhalb des Containers im reaktionsfähigen Modus

Ich habe eine Tabelle, die innerhalb eines Div ist. Im ansprechenden Modus geht der Tisch außerhalb des div-Bereich und sieht wie folgt aus:Tabelle in div geht außerhalb des Containers im reaktionsfähigen Modus

Ich versuche, den Tisch Umzug in Zentrum in ansprechenden Modus zu haben. Ich mag es so aussehen:

Zur Zeit, als die Bildschirmbreite klein wird, wird die Tabelle nah genug nach links in dem Behälter passen. Ich möchte nicht, dass der Tisch außerhalb des Containers verschwindet.

Weiß jemand, wie ich das erreichen kann?

.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>

Quelle

2016-04-19 Atma

Oh Mann, wo damit beginnen sogar ... Ya könnte eine Geige oder codepen für Leute mit der freien Zeit gehört damit zu basteln. –

Wie wäre es

overflow-x: auto;

Zum div.inner Element hinzufügen. Obwohl ich nicht sicher bin, ob Sie das wollen. Ihr CSS wäre so etwas wie

.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. 
}

Ich nahm mir die Freiheit, eine zweite Zelle für Demostrationen Sake hinzuzufügen.

.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>

Quelle

2016-04-19 20:04:44

Versuchen Sie das img-responsive Klasse auf Ihre Bilder wie folgt aus:

<!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>

Quelle

2016-04-19 19:57:24

Tabelle in div geht außerhalb des Containers im reaktionsfähigen Modus

Antwort

Verwandte Themen