如何使用css合并表的行?

时间:2017-08-19 16:34:04

标签: html5 css3

好的,所以我做了一张桌子。我面临的问题是我想知道如何合并我的表行...任何人都可以帮助我或教我如何合并我的表行?例如,如果我的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>

1 个答案:

答案 0 :(得分:1)

<td>标记上使用rowspan属性。例如。使用<td rowspan="2">this row is two rows merged</td>您可以在https://www.w3schools.com/TAGs/att_td_rowspan.asp

中找到有关此内容的更多资源