CSS:表格大小问题 (caption/tr/th/td)-6ren

CSS:表格大小问题 (caption/tr/th/td)

转载作者：太空宇宙更新时间：2023-11-04 11:27:23

25

4

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

最佳答案

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

原因:

您需要将最小宽度添加到 <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(索引.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/

25

4

0

文章推荐： c++ - 如何在类中初始化二维数组？

文章推荐： css - 如何向这个纯 CSS 文本旋转器添加额外的幻灯片？

javascript - 如何在单击 (选定的 tr)时获取所有下一个数据 ID
我想要数组中所选 tr 的所有下一个 tr 的 data-id。我使用此代码，但这不是一个好代码。 var ids = Array.prototype.slice.call($("tr.selecte
javascript - 使用 Javascript，如何在悬停时在另一个之上显示一个，隐藏第二个？
JSFiddle:http://jsfiddle.net/9u8tnh97/ 我正在使用 jQuery 和 Bootstrap。我有一张 table 4 像这样的元素:
javascript - .appendChild(tr) 创建没有数据的 tr
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
regex - 为什么大括号前的反斜杠使我的正则表达式匹配和
在 Notepad++ 中，我试图制作一个正则表达式来匹配标签。起初，我认为必须转义大括号，所以我尝试了 \ .然而，这不仅符合我预期的开始标签，而且匹配所有。 s( 和 )。这是为什么？最佳答
javascript - 定位最后一个父表行 (tr)，而不是子表行 (tr)
我正在尝试定位其中包含子表行元素的表中的最后一个父表行。我已尝试使用下面的 jQuery 来定位 :last 伪值，但是，如预期的那样，它的目标是目标父表中的绝对最后一个表行元素。 $('table[
javascript - 如何使用纯JS在每个之后插入
我想插入新的在每个现有的之后。我的功能: var element = document.querySelector('tr.cart-item'); var newElement = docume
javascript - 匹配标签的正则表达式只匹配表中的第一个和最后一个
这个问题在这里已经有了答案: RegEx match open tags except XHTML self-contained tags (35 个答案) 关闭 9 年前。我希望这个正则表达式匹
javascript - 如何将垂直更改为水平
生成此代码是为了做两件事。第一个是单击复选框时突出显示表记录。第二个是即使页面刷新也能记住结果。 Untitled Document
javascript - 通过 tr 数组中的属性查找某个 tr
嗨，我正在尝试在 tr 数组中查找 tr属性名称是 docId 是否有任何类型的 jquery 选择器？我不想只用 for 循环遍历数组然后自己去找。除非你说我别无选择... 谢谢最佳答案如果
javascript - 如何在单击时打开 tr 内的表 tr
我有一张 table ，我想在单击加号图标时在 tr 中打开相同的 tr。我不明白我使用哪个 html 元素打开。请帮帮我。提前致谢。
python - BeautifulSoup - 输出中的空白行导致奇怪的无用
对你来说是个小问题:-) 我正在使用 BeautifulSoup 来解析 HTML 页面中表格的内容。问题是在我的输出文件的每一行(CSV/EXCEL)之间，它拉出一个空行......这是 HTML
html - 悬停会影响表格中的其他
我制作了一个包含基本信息的表格，每个奇数行和偶数行都有不同的颜色。在 :hover影响它是橙色的，不管它是偶数还是奇数。但是当我想“分组”3 我发现了一个问题。我试着把它包装成但它没有用。我的目标
python - 如何选择除最后两个 tr 之外的所有 tr
在 lxml 中，我使用 xpath 选择表(具有不同行数)中的所有 tr，除了包含乱码的最后两行。是否有排除最后两行的模式匹配？我正在浏览 xpath 教程，显然有一个“except”运算符和一个
javascript - 我们可以在 `` 之后使用嵌套表吗？
我在表列表中显示来自数据库的记录。此外，我在每一行中都有一个跟进按钮，如果任何用户单击跟进按钮，则会为特定用户打开一个包含详细信息的弹出窗口。或者任何其他想法来处理这个问题？我试过用这样的东西
jquery - 如何在当前之后附加新
我有以下表格结构。当我点击时我想添加新的在旁边其中被点击。所以结果会是:
css - 使 1 tr 和 4 td 仅通过 CSS 表现得像 : 2 tr with 1 td in each and 1 tr with 2 td in,
使用这个 HTML: 1 2 3 4 我得到这个输出: 1 2 3 4 但我想要的是: 1 2 3 4 如何
javascript - 如何在单击 TR 时选择它并在单击另一个 TR 时删除选择
嗨，我有一个表格，我在这里做了一些代码来将表格更改为可编辑和可选择...我的要求是 1.当点击一个TR时，它应该变成蓝色，再次点击另一个TR，它将显示蓝色，旧的TR变成白色(威胁不可选择) 我由于一些
javascript - 我动态生成了2个，我想获取我点击的的数据
这个问题可能令人困惑，但这就是确切的情况.. 我已经动态生成了一些(根据从数据库获取的数据)，现在我想允许用户选择其中一个单选按钮，并且我想捕获所单击的行的详细信息，因此请检查我的代码并协助我的aj
jquery - 使用jquery将 html更改为...
免责声明:HTML、JQuery、Ajax 技能水平 — 垃圾。一直是一个厚客户。我有一个表单，允许用户输入客户代码和电子邮件地址。我想在客户代码有效时显示客户的姓名。我会错误地通过 Ajax 和
jQuery 在其他元素之后添加元素
正在尝试添加其他元素表中的元素根据的行跨度该特定元素元素。在同一功能中，单击中的此按钮后元素的行数每次增加1，因此也需要增加行数。不知道该怎么做。也许使用 slice()以某种方式发挥作

首页

博学

6Ren·AI

商城

CSS:表格大小问题 (caption/tr/th/td)