html - 如何将 table 放在 table 里面?

标签 html css html-table

我想创建一个简单的价目表,其中第二个元素有两个子列表。 并且所有价格列必须为文本align=right,并且元素必须为文本align=left

你知道如何做到这一点吗? 我想要这样的东西。 enter image description here

<!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>

最佳答案

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>

我想帮助你。

关于html - 如何将 table 放在 table 里面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45659446/

相关文章:

css - 重叠 div 与相对定位?

html - 独立地为行内 block 元素添加边距

javascript - 响应式下拉汉堡菜单

html - IE 11 问题

javascript - 使用 JavaScript 对 HTML 表格进行排序

javascript - 如何使用 JavaScript/jQuery 将单独的 thead 和 tbody 合并到一个表中

javascript - jQuery - 如何同时应用 .animate() 和 .show ('slide' )?

javascript - 关闭浏览器后 localStorage 重置

javascript - 更改 v-for 生成表的文本颜色

html - 使用jquery mobile为iOS设置phonegap