Question

专门处理定价表格图表。当屏幕最大化时，所有元素（标题/ tr / th / td）都正确地间隔开，如果在背景颜色内。一旦屏幕开始变小，元素就会保持间隔并延伸到边框和页面本身。

如何让元素保持在表格的大小范围内，以及它的背景整个屏幕大小调整？

HTML5：

<table>
                    <caption>Cracked Screens &amp; 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;
}

Answer 1

这应该可以解决问题......如果我遗漏了什么，请告诉我？

原因：

您需要为<td>和<th>标记添加最小宽度，这样他们就不会调整大小以将文本推送到下一行。

Here is the JSFiddle demo

截图：

// 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（index.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;
}

Answer 2

一种方法是使用bootstrap来实现这一目标。如果你想通过覆盖原始的bootstrap css来使它响应，你可以根据bootstrap的网格检查每个屏幕的大小。

您可以查看引导网格系统here.

只需在bootstrap原始css中搜索 @media（min-width：768px）和（max-width：991px），然后在你的样式部分设置自己的属性，覆盖它case，根据屏幕尺寸设置表格尺寸。

CSS：表大小调整问题（标题/ tr / th / td）

2 个答案: