Question

我有一个简单的table rowspan。我需要将单元格number1，单元格编号2和单元格编号6设置为相同的大小。我怎样才能实现这一目标

<table>
  <tr>
    <td>number1</td>
    <td>number3</td>
  </tr>
  <tr>
    <td rowspan="2">number2</td>
    <td>number4</td>
  </tr>
  <tr>
    <td>number5</td>
  </tr>
  <tr>
    <td>number6</td>
    <td>number7</td>
  </tr>
</table>

Answer 1

诀窍是在每行有行行的情况下添加单个单元格行。所以基本上，你需要为桌子中的任何跨度提供空间，否则你会从桌子上伸出额外的单元格。最容易记住的方法是：

为每个前进行的每个单位（rowspan -1）减少一个单元格。

为每个前进列上的每个单位（colspan -1）减少一个单元格。

＆＃13;

table {
  width: 105px;
  table-layout: fixed;
}
td {
  width: 50px;
  text-align: center;
}
tr {
  height: 50px;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Col1, 2, & 6</title>
  <style>
    table {
      1px solid grey
    }
    td {
      border: 1px solid black
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td rowspan="2">1</td>
      <td rowspan="2">2</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="2">3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td rowspan="2">6</td>
      <td rowspan="2">7</td>
    </tr>
    <tr></tr>
  </table>
</body>

</html>

＆＃13;

Answer 2

你喜欢这个吗？

此解决方案使用现有标记，不需要任何＆＃34;空＆＃34;行。

＆＃13;

table {
  border-collapse: collapse;
}
td {
  border: 1px solid #ddd;
  padding: 10px;
}
tr:nth-child(1) td:first-child,
tr:nth-child(2) td:first-child,
tr:nth-child(4) td:first-child {
  height: 60px;
}

＆＃13;

<table>
  <tr>
    <td>number1</td>
    <td>number3</td>
  </tr>
  <tr>
    <td rowspan="2">number2</td>
    <td>number4</td>
  </tr>
  <tr>
    <td>number5</td>
  </tr>
  <tr>
    <td>number6</td>
    <td>number7</td>
  </tr>
</table>

＆＃13;

Rowspan单元格大小不一样

2 个答案: