Css 调整窗口大小时，内有表的div正在向外移动

我正在做一个“信用计算器”-信用计算器-

我是用流畅的布局做的。我在互联网上搜索有关我的问题的信息，但什么也找不到

代码CSS：

/* RESET CSS*/

*{
margin:0;
border:0;
padding:0;

}



/* Diseño...*/

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}

html{height:100%;width:100%;}   

body  {
margin:3%;
text-align:center;
font: Arial, sans-serif;
color:white;
background-image: url(negro3.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover; 

}


#principal {
position:relative;
opacity:0.9;
width:50% !important;
min-width:500px;
min-height:100%;
max-width:1500px;
margin:0 auto 0 auto;
background-color: #360000;
border:1px solid transparent;
padding:5%;
}




#footer{
position:absolute;
bottom:0;
left:0;
width: 100%;
background-color:gray;
height:2%;
}



.header {
position:absolute;
left:0;
top:0;
width:100%;
height:3%;
background-color:gray;
}


.form1{
width:70%;
height:30%;
margin:15% auto 0 auto;
}

#formulario1 input{
padding:.3em;
}







.semestre1 {
display: table;
margin:0 auto 10% auto;
padding:0px;
box-shadow: 3px 4px 6px #888888;


-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;

-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;

-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;

-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;

}.semestre1 table{
    border-collapse: collapse;
    border-spacing: 0;
margin:0px;padding:0px;
}.semestre1 tr:last-child td:last-child {
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
}
.semestre1 table tr:first-child td:first-child {
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}
.semestre1 table tr:first-child td:last-child {
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
}.semestre1 tr:last-child td:first-child{
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
}.semestre1 tr:hover td{
background-color:#994e4e;


}
.semestre1 td{
vertical-align:middle;

background-color:#994e4e;

border:1px solid #c4baba;
border-width:0px 1px 1px 0px;
text-align:center;
padding:3px;
font-size:11px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}.semestre1 tr:last-child td{
border-width:0px 1px 0px 0px;
}.semestre1 tr td:last-child{
border-width:0px 0px 1px 0px;
}.semestre1 tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.semestre1 tr:first-child td{
background:-o-linear-gradient(bottom, #4c0b0b 5%, #4c0b0b 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c0b0b), color-stop(1, #4c0b0b) );
background:-moz-linear-gradient( center top, #4c0b0b 5%, #4c0b0b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0b0b", endColorstr="#4c0b0b");  background: -o-linear-gradient(top,#4c0b0b,4c0b0b);

background-color:#4c0b0b;
border:0px solid #c4baba;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:13px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.semestre1 tr:first-child:hover td{
background:-o-linear-gradient(bottom, #4c0b0b 5%, #4c0b0b 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c0b0b), color-stop(1, #4c0b0b) );
background:-moz-linear-gradient( center top, #4c0b0b 5%, #4c0b0b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0b0b", endColorstr="#4c0b0b");  background: -o-linear-gradient(top,#4c0b0b,4c0b0b);

background-color:#4c0b0b;
}
.semestre1 tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.semestre1 tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}


.semestre2 {


display: table;
margin:0 auto 20% auto;
padding:0px;
box-shadow: 3px 4px 6px #888888;


-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;

-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;

-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;

-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}.semestre2 table{
border-collapse: collapse;
border-spacing: 0;
margin:0px;padding:0px;
}.semestre2 tr:last-child td:last-child {
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
}
.semestre2 table tr:first-child td:first-child {
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}
.semestre2 table tr:first-child td:last-child {
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
}.semestre2 tr:last-child td:first-child{
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
}.semestre2 tr:hover td{
background-color:#994e4e;


}
.semestre2 td{
vertical-align:middle;

background-color:#994e4e;

border:1px solid #c4baba;
border-width:0px 1px 1px 0px;
text-align:center;
padding:3px;
font-size:11px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}.semestre2 tr:last-child td{
border-width:0px 1px 0px 0px;
}.semestre2 tr td:last-child{
border-width:0px 0px 1px 0px;
}.semestre2 tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.semestre2 tr:first-child td{
background:-o-linear-gradient(bottom, #4c0b0b 5%, #4c0b0b 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c0b0b), color-stop(1, #4c0b0b) );
background:-moz-linear-gradient( center top, #4c0b0b 5%, #4c0b0b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0b0b", endColorstr="#4c0b0b");  background: -o-linear-gradient(top,#4c0b0b,4c0b0b);

background-color:#4c0b0b;
border:0px solid #c4baba;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:13px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.semestre2 tr:first-child:hover td{
background:-o-linear-gradient(bottom, #4c0b0b 5%, #4c0b0b 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c0b0b), color-stop(1, #4c0b0b) );
background:-moz-linear-gradient( center top, #4c0b0b 5%, #4c0b0b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0b0b", endColorstr="#4c0b0b");  background: -o-linear-gradient(top,#4c0b0b,4c0b0b);

background-color:#4c0b0b;
}
.semestre2 tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.semestre2 tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}


.creditos input{
text-align:center;
color:white;
background-color:#994e4e;
border:1px solid gray;
}

.creditos input:hover{
background-color:rgb(0%,25%,60%);
color:white;
}

.creditos input:focus{
background-color:rgb(0%,25%,60%);
color:white;
}



#materia{
text-align:left;
padding:4px;
}

.nivel{
text-align:center;
font-size:16px;
margin-bottom:2%;
font-family:Arial;
font-weight:bold;
color:gold;
}

代码HTML:

 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Calculadora de Creditos del CECyT No. 1 Gonzalo Vazquez Vela del IPN">
<meta name="keywords" content="calculadora de creditos,CECyT 1,Sistema Escolarizado,Gonzalo Vazquez Vela">
<title>CALCULADORA DE CREDITOS - CECyT No. 1 "GONZALO VAZQUEZ VELA" DEL IPN</title>
<link rel="stylesheet" media="screen" href="carreras.css">
<link rel="stylesheet" media="handheld" href="">
<link rel="stylesheet" media="print" href="">
<noscript>
Este navegador no soporta javascript ,actualiza tu navegador.
</noscript>
</head>

<body>
<div id="principal">
<div class="header">
<h1>SISTEMAS DIGITALES</h1>
</div>

<div class="form1">
<form id="formulario1" onsubmit="return submitForm();" method="post" >
Nombre: <input type="text" name="nombre"  autocomplete="off"/><br /> <br>
Boleta: <input type="text" name="boleta" autocomplete="off"/><br /> 
<br /><br /> 
<div class="form_result"> </div>
</form>
</div>
<br/><br/>




<!-- PRIMER SEMESTRE -->
<div class="nivel">NIVEL I</div>        
<form class="creditos" name="digitales" id="digitales" method="post" >
<div class="semestre1" >
<table >
<tr>
<td>
UNIDADES DE APRENDIZAJE
</td>
<td >
VALOR EN CRÉDITOS
</td>
<td>
CALIFICACIÓN 
</td>
<td>
ACREDITACIÓN
</td>
<td>
CARGA ACADÉMICA
</td>
</tr>
<tr>
<td nowrap id="materia">
ALGEBRA
</td>
<td>
5.62
</td>
<td>
<input type="text" id="1" name="1" size="2px">

</td>
<td>
Row 1
</td>
<td>
Row 1
</td>
</tr>
<tr>
<td nowrap id="materia">
COMPUTACION BASICA I
</td>
<td>
4.5
</td>
<td>
<input type="text" id="2" name="2" size="2px">
</td>
<td >
Row 2
</td>
<td >
Row 2
</td>
</tr>
<tr>
<td nowrap id="materia">
EXPRESION ORAL Y ESCRITA I
</td>
<td>
4.5
</td>
<td>
<input type="text" id="3" name="3" size="2px">
</td>
<td >
Row 3
</td>
<td>
Row 3
</td>

</tr>
<tr>
<td nowrap id="materia">
INGLES I
</td>
<td>
5.62
</td>
<td>
<input type="text" id="4" name="4" size="2px">
</td>
<td >
Row 4
</td>
<td>
Row 4
</td>

</tr>
<tr>
<td nowrap id="materia">
FILOSOFIA I
</td>
<td>
3.37
</td>
<td>
<input type="text" id="5" name="5" size="2px">
</td>
<td >
Row 5
</td>
<td>
Row 5
</td>

</tr>
<tr>
<td nowrap id="materia">
DESARROLLO PERSONAL
</td>
<td>
4.5
</td>
<td>
<input type="text" id="6" name="6" size="2px">
</td>
<td >
Row 6
</td>
<td>
Row 6
</td>

</tr>
<tr>
<td nowrap id="materia">
ORIENTACION JUVENIL Y PROFESIONAL I
</td>
<td>
0.0
</td>
<td>
<input type="text" id="7" name="7" size="2px">
</td>
<td >
Row 7
</td>
<td>
Row 7
</td>
</tr>
<tr>
<td nowrap id="materia">
DESARROLLO DE HAB. DEL PENSAMIENTO
</td>
<td>
3.37
</td>
<td>
<input type="text" id="8" name="8" size="2px">
</td>
<td >
Row 8
</td>
<td>
Row 8
</td>

</tr>
<tr>
<td nowrap id="materia">
HISTORIA DE MEXICO CONTEMPORANEO I
</td>
<td>
3.37
</td>
<td>
<input type="text" id="9" name="9" size="2px">
</td>
<td >
Row 9
</td>
<td>
Row 9
</td>
</tr>

</table>
</div>



..........


<!-- SEXTO SEMESTRE -->         
<div class="nivel">NIVEL VI</div>                   
<div class="semestre2" >
<table >
<tr>
<td>
UNIDADES DE APRENDIZAJE
</td>
<td >
VALOR EN CRÉDITOS
</td>
<td>
CALIFICACIÓN 
</td>
<td>
ACREDITACIÓN
</td>
<td>
CARGA ACADÉMICA
</td>
</tr>
<tr>
<td nowrap id="materia">
PROBABILIDAD Y ESTADISTICA
</td>
<td>
5.62
</td>
<td>
<input type="text" id="47" name="47" size="2px">  
</td>
<td>
Row 1
</td>
<td>
Row 1
</td>

</tr>
<tr>
<td nowrap id="materia">
FISICA IV
</td>
<td>
5.62
</td>
<td>
<input type="text" id="48" name="48" size="2px">  
</td>
<td >
Row 2
</td>
<td >
Row 2
</td>

</tr>
<tr>
<td nowrap id="materia">
QUIMICA IV
</td>
<td>
4.5
</td>
<td>
<input type="text" id="49" name="49" size="2px">  
</td>
<td >
Row 3
</td>
<td>
Row 3
</td>

</tr>
<tr>
<td nowrap id="materia">
INGLES VI
</td>
<td>
6.75
</td>
<td>
<input type="text" id="50" name="50" size="2px">  
</td>
<td >
Row 4
</td>
<td>
Row 4
</td>

</tr>
<tr>
<td nowrap id="materia">
ORIENTACION JUVENIL Y PROFESIONAL IV
</td>
<td>
0.0
</td>
<td>
<input type="text" id="51" name="51" size="2px">  
</td>
<td >
Row 5
</td>
<td>
Row 5
</td>

</tr>
<tr>
<td nowrap id="materia">
MANTENIMIENTO DE EQUIPO DE CÓMPUTO
</td>
<td>
4.5
</td>
<td>
<input type="text" id="52" name="52" size="2px">  
</td>
<td >
Row 6
</td>
<td>
Row 6
</td>

</tr>
<tr>
<td nowrap id="materia">
MICROELECTRÓNICA PROGRAMABLE
</td>
<td>
4.5
</td>
<td>
<input type="text" id="53" name="53" size="2px">  
</td>
<td >
Row 7
</td>
<td>
Row 7
</td>

</tr>
<tr>
<td nowrap id="materia">
REDES DIGITALES
</td>
<td>
4.5
</td>
<td>
<input type="text" id="54" name="54" size="2px">  
</td>
<td >
Row 8
</td>
<td>
Row 8
</td>

</tr>
<tr>
<td nowrap id="materia">
OPTATIVA V
</td>
<td>
5.62
</td>   
<td>
<input type="text" id="55" name="55" size="2px">  
</td>
<td >
Row 8
</td>
<td>
Row 9
</td>

</tr>

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

<div id="footer">©2014 Robles Sosa Eduardo Ignacio</div>

</div>
</body>

</html>

CALCULADORA DE CREDITOS-第1号CECyT“GONZALO VAZQUEZ VELA”DEL IPN
Este navegador没有soporta javascript，actualiza tu navegador。
数字系统
名称：


博莱塔：







尼维尔一号
阿普伦迪扎耶大学
克雷迪托斯谷酒店
加州大学
ACREDITACIÓN
卡加阿卡德埃米卡酒店
代数
5.62
一排
一排
基础计算I
4.5
第2排
第2排
口腔Y ESCRITAⅠ型表达
4.5
第3排
第3排
英格尔一世
5.62
第4排
第4排
丝虫Ⅰ
3.37
第5行
第5行
德萨罗私人酒店
4.5
第6行
第6行
青少年东方专业一
0
第7排
第7排
德萨罗·德哈布。佩萨米恩托酒店
3.37
第8行
第8行
墨西哥当代历史
3.37
第9行
第9行
..........
尼维尔六世
阿普伦迪扎耶大学
克雷迪托斯谷酒店
加州大学
ACREDITACIÓN
卡加阿卡德埃米卡酒店
有可能
5.62
一排
一排
费西卡四世
5.62
第2排
第2排
奎米卡四世
4.5
第3排
第3排
英格尔六世
6.75
第4排
第4排
东方青少年专业四
0
第5行
第5行
CÓMPUTO设备管理
4.5
第6行
第6行
可编程微电子学
4.5
第7排
第7排
数码红
4.5
第8行
第8行
OPTATIVA V
5.62
第8行
第9行
©2014罗伯斯·索萨·爱德华多·伊格纳西奥

您将#主要div的宽度限制为50%，同时提供最小宽度和最大宽度。 删除此属性

#principal{
    width:50% !important ; 
}

---

查看此

您好，正如您所说，您正在使用响应式设计，因此避免对字体等最常见元素使用像素测量

.semestre1 td {

font-size:70%;
 }

.semestre2 td{

font-size:70%;
 }

---

你的工作在修改的链接中

我认为问题在于表格的原因没有填充div.semestre1有什么建议吗？表格不会自行调整大小..你可以将表格包装在

div

中，然后给div一个`overflow-x:scroll；`

-webkit overflow scrolling:touch；

。这样调整其大小就会得到水平滚动。Bootstrap遵循相同的概念来制作响应性表格。好吧，你说得对，但我不想要固定的布局：/，我更喜欢液体。有什么建议吗？我想用这个来实现响应性网页设计