CSS：Table 尺码问题 (caption/tr/th/td)

Question

专门研究定价 table 图表。当屏幕最大化时，所有元素 (caption/tr/th/td) 都正确间隔开并且在背景颜色内。一旦屏幕开始变小，元素就会保持间隔并延伸到边框和页面本身之外。

如何让元素保持在 table 的大小范围内，并且它的背景会在整个屏幕上调整大小？

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>0</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>Call</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Side 2</th>
                        <td>0</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Side 3</th>
                        <td>0</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Side 4</th>
                        <td>0</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Side 5</th>
                        <td>0</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></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

一种方法是使用 bootstrap 来实现。如果你想通过覆盖原来的 bootstrap css.

使其响应，你可以根据 bootstrap 的网格检查每个屏幕尺寸

您可以查看 bootstrap 网格系统 here.

只需在bootstrap原css中搜索@media (min-width: 768px) and (max-width: 991px)并覆盖即可通过在您的样式部分设置您自己的属性，在您的情况下，根据屏幕尺寸设置 table 尺寸。

Answer 2

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

原因：

您需要将 min-width 添加到 <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>0</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Call</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Side 2</th>
            <td>0</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Side 3</th>
            <td>0</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Side 4</th>
            <td>0</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Side 5</th>
            <td>0</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></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;
}

CSS：Table 尺码问题 (caption/tr/th/td)

CSS: Table Sizing Issue (caption/tr/th/td)

css

html

html-table

width

caption