专门研究定价表图表。当屏幕最大化时，所有元素 (caption/tr/th/td) 都正确间隔开并且在背景颜色内。一旦屏幕开始变小，元素就会保持间隔并延伸到边框和页面本身之外。
如何让元素保持在表格的大小内，并且它的背景在整个屏幕大小调整中？
HTML5:
<table>
<caption>Cracked Screens & Hardware Pricing</caption>
<tr>
<th></th>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
<th>header 5</th>
<th>header 6</th>
<th>header 7</th>
<th>header 8</th>
</tr>
<tr>
<th></th>
<th colspan="8">iPhone</th>
</tr>
<tr>
<th>Side 1</th>
<td>$250</td>
<td>$48</td>
<td>$65</td>
<td>$58</td>
<td>$50</td>
<td>Call</td>
<td>$45</td>
<td>$65</td>
</tr>
<tr>
<th>Side 2</th>
<td>$150</td>
<td>$48</td>
<td>$65</td>
<td>$70</td>
<td>$47</td>
<td>$60</td>
<td>$45</td>
<td>$63</td>
</tr>
<tr>
<th>Side 3</th>
<td>$100</td>
<td>$45</td>
<td>$58</td>
<td>$55</td>
<td>$45</td>
<td>$53</td>
<td>$45</td>
<td>$60</td>
</tr>
<tr>
<th>Side 4</th>
<td>$100</td>
<td>$45</td>
<td>$55</td>
<td>$55</td>
<td>$50</td>
<td>$55</td>
<td>$45</td>
<td>$58</td>
</tr>
<tr>
<th>Side 5</th>
<td>$100</td>
<td>$45</td>
<td>$53</td>
<td>$57</td>
<td>$45</td>
<td>$50</td>
<td>$41</td>
<td>$60</td>
</tr>
</table>
CSS:
table{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-self: center;
align-self: center;
-webkit-flex-direction: column;
flex-direction: column;
background: #ECF0F1;
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
-webkit-border-radius: 0.3em;
border-radius: 0.3em;
padding: 1.3em;
width: 90%;
}
table>caption{
width: 30em;
height: 2em;
font-size: 2em;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
}
th{
height: 2em;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
text-align: center;
}
tr{
max-width: 30px;
text-align: center;
}
td{
min-width: 100px;
}
td:hover{
color: #008000;
}
.call{
background-color: #B6B6B4;
}
最佳答案
这应该可以解决问题...如果我遗漏了什么，请告诉我？
原因:
您需要将最小宽度添加到 <td>和 <th>标签，这样它们就不会调整到小，将您的文本推到下一行。
截图:
//HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<section>
<table>
<tr>
<th></th>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
<th>header 5</th>
<th>header 6</th>
<th>header 7</th>
<th>header 8</th>
</tr>
<tr>
<th>Side 1</th>
<td>$250</td>
<td>$48</td>
<td>$65</td>
<td>$58</td>
<td>$50</td>
<td>Call</td>
<td>$45</td>
<td>$65</td>
</tr>
<tr>
<th>Side 2</th>
<td>$150</td>
<td>$48</td>
<td>$65</td>
<td>$70</td>
<td>$47</td>
<td>$60</td>
<td>$45</td>
<td>$63</td>
</tr>
<tr>
<th>Side 3</th>
<td>$100</td>
<td>$45</td>
<td>$58</td>
<td>$55</td>
<td>$45</td>
<td>$53</td>
<td>$45</td>
<td>$60</td>
</tr>
<tr>
<th>Side 4</th>
<td>$100</td>
<td>$45</td>
<td>$55</td>
<td>$55</td>
<td>$50</td>
<td>$55</td>
<td>$45</td>
<td>$58</td>
</tr>
<tr>
<th>Side 5</th>
<td>$100</td>
<td>$45</td>
<td>$53</td>
<td>$57</td>
<td>$45</td>
<td>$50</td>
<td>$41</td>
<td>$60</td>
</tr>
</table>
</section>
</body>
</html>
//CSS(索引.css)
body{
margin: 0 !important;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
width: 100vw;
height: 100vh;
background: #1E67CB;
}
section{
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
}
table{
background: #ECF0F1;
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
-webkit-border-radius: 0.3em;
border-radius: 0.3em;
}
tr{
text-align: center;
}
th{
min-width: 62px;
}
td{
min-width: 62px;
}
关于CSS:表格大小问题 (caption/tr/th/td)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32281129/