堆栈内存溢出
  简体   繁体   English

一个TH有2行的HTML表

[英]HTML table on which one TH has 2 rows

 原文  2016-04-08 12:00:27  6   1    html/ html5

问题描述

What I intend is described in this picture made with my amazing paint skills: 这幅画以我惊人的绘画技巧描述了我的意图：

意向

Hopefully it's understandable. 希望这是可以理解的。 Basically I don't a separation of 2 rows in Amount and Total but I want that with Person which will have a row beneath it with 2 columns. 基本上，我在Amount和Total中没有2行的分隔，但我希望Person在其下具有2列的一行。

Is this possible? 这可能吗？

EDIT: It's not the same as the possible duplicate. 编辑：这与可能的重复项不同。 The suggest duplicate has the second row span across all columns. 建议重复项的第二行跨所有列。 I only want it on the first column "Person". 我只希望它在第一列“人”中。

1 个解决方案

解决方案1
 5 已采纳  2016-04-08 12:15:52

I think you don't make any effort to achieve it. 我认为您不会为此付出任何努力。 As simple as colspan and rowspan . 就像colspan和rowspan一样简单。 Try to read better next time, the example shared with you in comments is fine. 下次尝试阅读更好，在注释中与您分享的示例很好。 

 <table border="1"> <tr> <th colspan="2">person</th> <th rowspan="2">amount</th> <th rowspan="2">total</th> </tr> <tr> <td>name</td> <td>age</td> </tr> </table>

HTML 的 CSS 属性<div id="text_translate"><p> So i've watched a lecture on CSS rules inheritance and I was curious about how it would hork with HTML tables, so i tried to test some code to get a better understanding of inheritance.</p><p> 我写了以下代码： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> table{ border: 1px solid black; color: greenyellow; }.Table2, .th2{ border: 1px solid black; color: greenyellow; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;,DOCTYPE html&gt; &lt;hmt lan="en"&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table class="Table"&gt; &lt;tr&gt; &lt;th&gt; Style &lt;/th&gt; &lt;th&gt; ID &lt;/th&gt; &lt;th&gt; # of Classes, Pseudo-Classes &lt;/th&gt; &lt;th&gt; # of Elementes &lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br&gt;&lt;br&gt; &lt;table class="Table2"&gt; &lt;tr&gt; &lt;th class="th2"&gt; Style &lt;/th&gt; &lt;th class="th2"&gt; ID &lt;/th&gt; &lt;th class="th2"&gt; # of Classes, Pseudo-Classes &lt;/th&gt; &lt;th class="th2"&gt; # of Elements &lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div><p></p><p> 我希望两个 CSS 代码看起来相同，因为 &lt;th&gt; 标签似乎是 &lt;table&gt; 标签的子标签。 事实上，使用第一个 CSS 规则，Color 属性确实从 &lt;table&gt; 继承到 &lt;th&gt;，并且 &lt;th&gt; 中定义的文本是绿色的，但边框属性似乎没有被继承。 在第一种情况下，我只是在桌子周围得到一个正方形，在第二种情况下，我得到相同的正方形，但每个句子周围都有小正方形。</p><p> <a href="https://i.stack.imgur.com/mGtTI.png" rel="nofollow noreferrer">从第一个 CSS 规则到 &lt;table&gt; 的结果</a></p><p><a href="https://i.stack.imgur.com/X71tp.png" rel="nofollow noreferrer">第二个 CSS 规则的结果到 &lt;table&gt; &lt;th&gt;</a></p><p> 现在我的问题是：为什么 &lt;th&gt; 在第一种情况下没有继承边框属性，是否有一些属性不会从父级传递给子级，如果是，我在哪里可以找到它们？ 或者也许 &lt;th&gt; 被定义为不是 &lt;table&gt; 孩子？ 这里发生了什么？</p></div>继承到<table> <tbody><tr><td> ,</td><th> ,</th></tr><tr></tr></tbody></table> - Which CSS properties for an HTML <table> inherit to <td>, <th>, <tr>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何搜索 HTML 表中的所有列。 我的桌子有多个<th>行 - How do I search all the columns in the HTML table. My table has multiple <th> rows 如何从没有 id、jQuery 或 Javascript 的 HTML 表的 thead 和 tbody 中删除空的 th 和 td - How to remove empty th and td from thead and tbody from the HTML table which has no id, jQuery or Javascript 表格HTML验证问题-元素th中没有任何单元格 - Table HTML validation issue - element th has no cells beginning in it HTML 的 CSS 属性<div id="text_translate"><p> So i've watched a lecture on CSS rules inheritance and I was curious about how it would hork with HTML tables, so i tried to test some code to get a better understanding of inheritance.</p><p> 我写了以下代码： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> table{ border: 1px solid black; color: greenyellow; }.Table2, .th2{ border: 1px solid black; color: greenyellow; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;,DOCTYPE html&gt; &lt;hmt lan="en"&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table class="Table"&gt; &lt;tr&gt; &lt;th&gt; Style &lt;/th&gt; &lt;th&gt; ID &lt;/th&gt; &lt;th&gt; # of Classes, Pseudo-Classes &lt;/th&gt; &lt;th&gt; # of Elementes &lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br&gt;&lt;br&gt; &lt;table class="Table2"&gt; &lt;tr&gt; &lt;th class="th2"&gt; Style &lt;/th&gt; &lt;th class="th2"&gt; ID &lt;/th&gt; &lt;th class="th2"&gt; # of Classes, Pseudo-Classes &lt;/th&gt; &lt;th class="th2"&gt; # of Elements &lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div><p></p><p> 我希望两个 CSS 代码看起来相同，因为 &lt;th&gt; 标签似乎是 &lt;table&gt; 标签的子标签。 事实上，使用第一个 CSS 规则，Color 属性确实从 &lt;table&gt; 继承到 &lt;th&gt;，并且 &lt;th&gt; 中定义的文本是绿色的，但边框属性似乎没有被继承。 在第一种情况下，我只是在桌子周围得到一个正方形，在第二种情况下，我得到相同的正方形，但每个句子周围都有小正方形。</p><p> <a href="https://i.stack.imgur.com/mGtTI.png" rel="nofollow noreferrer">从第一个 CSS 规则到 &lt;table&gt; 的结果</a></p><p><a href="https://i.stack.imgur.com/X71tp.png" rel="nofollow noreferrer">第二个 CSS 规则的结果到 &lt;table&gt; &lt;th&gt;</a></p><p> 现在我的问题是：为什么 &lt;th&gt; 在第一种情况下没有继承边框属性，是否有一些属性不会从父级传递给子级，如果是，我在哪里可以找到它们？ 或者也许 &lt;th&gt; 被定义为不是 &lt;table&gt; 孩子？ 这里发生了什么？</p></div>继承到<table> <tbody><tr><td> ,</td><th> ,</th></tr><tr></tr></tbody></table> - Which CSS properties for an HTML <table> inherit to <td>, <th>, <tr> 可滚动 HTML 表格行与行之间有空格 - Scrollable HTML table has spaces between rows 刷新具有进度条的html表 - Refreshing a html table which has a progress bar html保护表格中的单元格 - html protect th cells in a table 在html表格的顶部居中 - Center the top th in a html table 将图标添加到<th>在 HTML 表格中 - Add icon to <th> in the HTML table 在HTML表格中的相对位置 - Relative positioning a th in html table
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM