CSS：表格大小问题（标题/tr/th/td）答案

【问题标题】：CSS: Table Sizing Issue (caption/tr/th/td)CSS：表格大小问题（标题/tr/th/td）
【发布时间】：2015-11-23 17:02:46
【问题描述】：

专门制作定价表图表。当屏幕最大化时，所有元素 (caption/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;
}

【问题讨论】：

标签： css html html-table width caption

【解决方案1】：

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

原因：

您需要将 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>$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;
}

【讨论】：

我看到了你的 JSFiddle，我添加了 min-width 并且背景仍然没有粘住。这是它添加的jsfiddle...我看不出有什么区别...jsfiddle.net/zh3btgvn
当我缩小屏幕时，表格和页面也是如此。显示溢出和超出范围的元素...
@blackRob4953 所以在你的 jsfiddle 上看起来你的标签的最小宽度是 62px，这就是我的......但你的应该是 67px......所以如果你更改它将停止标题将数字放到下一行...
@blackRob4953 在和标签上添加 min-width 允许表格从内部调整大小（最佳方式）....您可以这样做的另一种方式是在表格本身上添加 min-width ...因此表格不会缩小超过该限制...然后您不必将其添加到和
它仍然溢出我的表格背景之外。将 67px 乘以 9 行以获得表格最小宽度？