Onsen UI ons-col rowspan

时间:2015-12-27 03:31:20

标签: onsen-ui

我们如何在Onsen ons-row&中实现 rowspan ons-col,就像我们在table / tr / td中做的那样?

以下是一个示例。

非常感谢。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

检查一下:

<v-ons-page>
  <ons-list>
    <ons-list-item>
      <ons-row>
        <ons-col width="50%">
          <ons-row>
            <ons-col width="50%"  > <b>Month</b> </ons-col>
            <ons-col  width="50%" > <b>Savings</b>  </ons-col>
          </ons-row>
          <ons-row>
            <ons-col width="50%" > January </ons-col>
            <ons-col  width="50%"> $100  </ons-col>
          </ons-row>
          <ons-row>
            <ons-col width="50%"> February </ons-col>
            <ons-col  width="50%"> $80  </ons-col>
          </ons-row>
        </ons-col>
        <ons-col width="50%">
          <ons-row>
            <ons-col width="100%" style="text-align: center"> <b>Savings for holiday!</b> </ons-col>
          </ons-row>
          <ons-row>
            <ons-col width="100%" style="height: 38px; line-height: 38px;"  > $50  </ons-col>
          </ons-row>
        </ons-col>
      </ons-row>
    </ons-list-item>
  </ons-list>
</v-ons-page>