为什么我的表格在尝试调整大小时会截断文本？另外，为什么桌子的顶部甚至没有我的名字？
------HTML代码------
<!DOCTYPE html>
<html>
<head>
<title>********* ******** | Jr Developer</title>
<link rel="stylesheet" type="text/css" href="css/portfolioStyle.css">
</head>
<body >
<header id="nameAndContact">
<div class="container">
<h1>********* ********</h1>
<table>
<tr>
<th></th>
<td>Contact Information</td>
</tr>
<tr>
<th>Email:</th>
<td>mac************@*****.com</td>
</tr>
<tr>
<th>Phone:</th>
<td>***-***-****</td>
</tr>
</table>
</div>
</header>
<section id="selfTitleAndDesc">
<div class="container">
<h1>Full Stack Developer and Designer</h1>
<h2>I write functional and simple to understand code with a strong working knowledge of front and back-end services</h2>
</div>
</section>
</body>
</html>
--------结束 HTML 代码--------
--------CSS代码-------------
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#nameAndContact h1{
float:auto;
width:70%;
padding:0;
text-align:center;
font-family:"Arial Black", Gadget, sans-serif;
font-size:40px;
box-sizing: border-box;
}
#nameAndContact table{
table-layout:fixed;
display:inline;
float:right;
width:30%;
padding:0 30px;
text-align:center;
font-family:"Arial Black", Gadget, sans-serif;
font-size:14px;
}
@media(max-width:700px){
#nameAndContact h1{
width:100%;
float:none;
}
#nameAndContact table{
width:100%;
float:none;
}
}
--------CSS 代码结束---------
我遇到的问题是，当我调整浏览器中的窗口大小时，电子邮件和“联系信息”一词开始在屏幕右侧被切断。我需要以某种方式将文本包裹在表格中吗？我在 h1 和表格中使用的百分比是否存在问题？也不确定我的表格没有与我的 h1 显示一致的原因。非常感谢任何帮助，我对网络编码相当陌生，谢谢大家:)。
www说2回答
-
慕姐4208626
删除我注释掉的内容：内联不适用于浮动宽度 30% 不稳定，我建议使用像素并更改它们@media填充只是占用了不必要的空间#nameAndContact table { table-layout: fixed; /*display: inline;*/ float: right; /*width: 30%;*/ /*padding: 0 30px;*/ text-align: center; font-family: "Arial Black", Gadget, sans-serif; font-size: 14px;}然后将其添加到您的CSS中：缩短第一列，因为它不需要那么大，所以我给它一个固定的大小#nameAndContact table th:first-of-type { width: 90px;}我还建议检查表结构（哪里是 td 哪里 th 等） -
神不在的星期二
为了使媒体查询正常工作，您需要在<head>页面部分中使用以下内容：<meta name="viewport" content="width=device-width, initial-scale=1.0">或者它的某种变体。
随时随地看视频慕课网APP
相关分类
Html5