html - 如何使用CSS合并表格的行?

标签 html css

好的,我已经做了一张 table 。我面临的问题是我想知道如何合并我的表格行......任何人都可以帮助我或教我如何合并我的表格行?例如,如果我下面的 row1 和 row2 想合并为一行,我该如何合并呢?如果有人能帮助我,我会很高兴 :) [ ps:我可以通过写一些风格的东西来合并表格吗??如果可以那怎么办?? 下面是我的代码:]

<html>
<head>

<style type="text/css">
  .Table
  {
    display: table;
  }
  .Title
  {
    display: table-caption;
    text-align: center;
    font-weight: bold;
    font-size: larger;
}
.Heading
{
    display: table-row;
    font-weight: bold;
    text-align: center;
}
.Row
{
    display: table-row;
}
.Cell
{
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}
</style>
 <body>

 <div class="Table">
  <div class="Title">
    <p>This is a Table</p>
</div>
<div class="Heading">
    <div class="Cell">
        <p>Heading 1</p>
    </div>
    <div class="Cell">
        <p>Heading 2</p>
    </div>
    <div class="Cell">
        <p>Heading 3</p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p>Row 1 Column 1</p>
    </div>
    <div class="Cell">
        <p>Row 1 Column 2</p>
    </div>
    <div class="Cell">
        <p>Row 1 Column 3</p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p>Row 2 Column 1</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 2</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 3</p>
    </div>
</div>
 </div>
 </body>
 </html>

最佳答案

<td> 上使用 rowspan 属性标签。例如。使用 <td rowspan="2">this row is two rows merged</td>您可以在 https://www.w3schools.com/TAGs/att_td_rowspan.asp 中找到更多相关资源

关于html - 如何使用CSS合并表格的行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45773898/

相关文章:

html - 为什么除 Chrome 之外的所有浏览器中这些 div 之间仍然有空白?

html - <head> 中的 Meteor 模板引用

javascript - 使用 currentTime 时视频滞后

css - 瓦丁 8.2.0 : How to vertical align image in grid cell

css - 如何更改特定 <li> 的字体

javascript - 如何使用 jquery 将单选按钮值存储在 sessionStorage 中

html - 我可以替换 <table border=1 >' with ` <table >` + css: ` table{...}` 吗?

php - 在 wordpress 中的帖子之间切换

css - 固定导航: is not fixed on scroll down

html - 将内部 div 宽度设置为等于外部 div 的宽度