Question

我想创建一个简单的价目表，在第二个项目中有两个子列表。并且所有价格列必须是文本align = rigth，item必须是text align = left

你知道怎么做吗？我想要这样的事情。

<!DOCTYPE html>
<html>
<body>

<table style="width:100%" >
  <tr>
    <td>one</td>
    <td>100$</td> 

  </tr>
  <tr>
    <td>two

               <table style="width:100%" >
   <tr>
     <td>three</td>
     <td>300$</td>
   </tr>
   <tr>
     <td>four</td>
     <td>400$</td>
   </tr>
   </table>
    </td>

    <td></td>

  </tr>
  <tr>
    <td>five</td>
    <td>500$</td>

  </tr>

</table>

</body>
</html>

Answer 1

将colspan 2用于嵌套子表的单元格，并添加适当的CSS属性：

table {
  border-collapse: collapse;
}

td:nth-child(2) {
  text-align: right;
}

table table td:nth-child(1) {
  padding-left: 20%;
}

<table style="width:100%">
  <tr>
    <td>one</td>
    <td>100$</td>

  </tr>
  <tr>
    <td colspan="2">
      two
      <table style="width:100%">
        <tr>
          <td>three</td>
          <td>300$</td>
        </tr>
        <tr>
          <td>four</td>
          <td>400$</td>
        </tr>
      </table>
    </td>

  </tr>
  <tr>
    <td>five</td>
    <td>500$</td>

  </tr>

</table>

Answer 2

tr{
  display: block;
}
td{
  min-width: 100px;
}
td:nth-child(2){
  text-align:right;
}
td > li{
  padding-left: 20px;
}

<table>
  <tr style="border-bottom: 2px solid black;">
    <td>one</td>
    <td>100$</td>
  </tr>
  <tr>
    <td>two</td>
  </tr>
  <tr>
    <td><li>three</li></td>
    <td>300$</td>
  </tr>
  <tr style="border-bottom: 2px solid black;">
    <td><li>four</li></td>
    <td>300$</td>
  </tr>
  <tr style="border-bottom: 2px solid black;">
    <td>five</td>
    <td>400$</td>
  </tr>
</table>

我想帮助你。

Answer 3

您应该在<tbody>内的<tr>附近使用<table>标记，然后在<td>内添加另一个表格。

P.S 你应该看看CSS矩阵，它可能会让这更容易......

Answer 4

表格标题使用此结构

<thead>
    <tr>
       <th>your header text</th>
    </tr>
</thead>

表页脚

<tfoot>
   <tr>
      <td> your footer text</td>
   </tr>
</tfoot>

如何把桌子放在桌子里面？

4 个答案: