在表格中实现子列/行，纯粹使用HTML

Question

我已经创建了此列表页面，仅使用html。他们显示任务和子任务就像这样。

如果您在子课题负责人注意到，完成该复选框是在同一列的子任务的名称。我如何将子任务复选框设置为与任务复选框类似的列，但仍然保留子任务复选框和子任务名称与“名称”列对齐？

这是代码。

<style> 
table, th, td { 
    border: 1px solid black; 
} 
</style> 

<table> 
<thead> 
    <tr> 
    <th></th> 
    <th> 
     <div>Name  

     </div> 
    </th> 
    <th> 
     <div>Assigned To 

     </div> 
    </th> 
    <th scope="col"> 
     <div>Due Date 

     </div> 
    </th> 

    <th scope="col"> 
<!-- Add Detail, Edit, and Delete Buttons --></th> 
    </tr> 
</thead> 
<!-- ITEM --> 
<tbody> 
    <tr> 
    <td data-label="Select Row"> 
     <label> 
     <input type="checkbox" name="options" /> 
     <span></span> 

     </label> 
    </td> 
    <td scope="row" data-label="Item Name">Task   

    </td> 
    <td data-label="Assigned To">Tyler Zika</td> 
    <td data-label="Due Date">6/06/2016</td> 
    <td data-label="High Priority"> 

     <button>   
     <span>High Priority</span> 
     </button> 
    </td> 
    <td data-label="Add Detail, Edit, and Delete Buttons" > 

     <button>   
     <span>New</span> 
     </button> 

     <button>  
     <span>Edit</span> 
     </button> 

     <button>   
     <span>Delete</span> 
     </button> 
    </td> 
    </tr> 
    <!-- BEGINNING OF ITEM ACTIVITY --> 
    <tr> 
    <td data-label="Indent Row"></td> 
    <td scope="row" data-label="Detail Checkbox and Name"> 
     <label> 
     <input type="checkbox" name="options" /> 
     <span></span> 

     </label> 
     Sub-task 1   

     <p id="">Description about sub task</p> 
    </td> 
    <td data-label="Detail Name"></td> 
    <td data-label="Detail Due Date">5/20/2016</td> 
    <td data-label="High Priority"> 

     <button> 
     <span>High Priority</span> 
     </button> 
    </td> 
    <td data-label="Add Detail, Edit, and Delete Buttons" > 



     <button> 
     <span>Edit</span> 
     </button> 

     <button> 
     <span>Delete</span> 
     </button> 
    </td> 
    </tr> 
    <!-- END OF ITEM ACTIVITY --> 

    <!-- BEGINNING OF ITEM ACTIVITY --> 
    <tr> 
    <td data-label="Indent Row"></td> 
    <td scope="row" data-label="Detail Checkbox and Name"> 
     <label> 
     <input type="checkbox" name="options" /> 
       </label> 
     Sub-task 2 
     <p id="">-Description about second sub task.</p> 
    </td> 
    <td data-label="Detail Name"></td> 
    <td data-label="Detail Due Date">5/20/2016</td> 
    <td data-label="High Priority"> 

     <button> 
     <span>High Priority</span> 
     </button> 
    </td> 
    <td data-label="Add Detail, Edit, and Delete Buttons" > 



     <button> 
     <span>Edit</span> 
     </button> 

     <button> 
     <span>Delete</span> 
     </button> 
    </td> 
    </tr> 
    <!-- END OF ITEM ACTIVITY --> 
</tbody> 
<!-- END OF ITEM --> 
</table> 

Answer 1

使用表格，这是尽可能接近我们可以得到：https://jsfiddle.net/a8mo92mu/

我添加了另一个<td>到每一行，要么都有一个复选框或没有。如果没有，您可以使用:empty CSS选择器以任何您喜欢的方式进行设置。

如果这是错误的，你可以发布你想要的图片吗？你说你希望子任务的名称与“名称”列标题对齐，但你也希望复选框与其他子任务排成一行，但不要与主任务混合在一起。我认为这是尽可能接近我们可以得到的。

UPDATE

你可以把一个表的表里面！

我在这里更新的提琴：https://jsfiddle.net/a8mo92mu/1/ 我做了一个新的<table>行内拥有自己的布局 - 您也需要使用colspan，使跨越两个或三跨一列跨度。

Answer 2

为了达到预期的结果，使用下面的代码

<style> 
    table, th, td { 
    border: 1px solid black; 
    } 
    p { 
    display:inline 
} 
</style> 

<table> 
    <thead> 
    <tr> 
     <th></th> 
     <th> 
     <div>Name 

     </div> 
     </th> 
     <th> 
     <div>Assigned To 

     </div> 
     </th> 
     <th scope="col"> 
     <div>Due Date 

     </div> 
     </th> 

     <th scope="col"> 
     <!-- Add Detail, Edit, and Delete Buttons --> 
     </th> 
    </tr> 
    </thead> 
    <!-- ITEM --> 
    <tbody> 
    <tr> 
     <td data-label="Select Row"> 
     <label> 
     <input type="checkbox" name="options" /> 
     <span></span> 

     </label> 
     </td> 
     <td scope="row" data-label="Item Name">New Whiteboard 

     </td> 
     <td data-label="Assigned To">Tyler Zika</td> 
     <td data-label="Due Date">6/06/2016</td> 
     <td data-label="High Priority"> 

     <button>   
     <span>High Priority</span> 
     </button> 
     </td> 
     <td data-label="Add Detail, Edit, and Delete Buttons"> 

     <button>   
     <span>New</span> 
     </button> 

     <button>  
     <span>Edit</span> 
     </button> 

     <button>   
     <span>Delete</span> 
     </button> 
     </td> 
    </tr> 
    <!-- BEGINNING OF ITEM ACTIVITY --> 
    <tr> 
     <td data-label="Indent Row"></td> 
     <td scope="row" data-label="Detail Checkbox and Name"> 
     <table> 
      <tr> 
      <td> 
       <label> 
     <input type="checkbox" name="options" /> 
     <span></span> 

     </label></td> 
      <td> 
       Front-end Redesign 

       <p id="">Description about sub task</p> 
      </td> 
      </tr> 
     </table> 
     </td> 
     <td data-label="Detail Name"></td> 
     <td data-label="Detail Due Date">5/20/2016</td> 
     <td data-label="High Priority"> 

     <button> 
     <span>High Priority</span> 
     </button> 
     </td> 
     <td data-label="Add Detail, Edit, and Delete Buttons"> 

     <button> 
     <span>New</span> 
     </button> 

     <button> 
     <span>Edit</span> 
     </button> 

     <button> 
     <span>Delete</span> 
     </button> 
     </td> 
    </tr> 
    <!-- END OF ITEM ACTIVITY --> 

    <!-- BEGINNING OF ITEM ACTIVITY --> 
    <tr> 
     <td data-label="Indent Row"></td> 
     <td scope="row" data-label="Detail Checkbox and Name"> 
     <table> 
      <tr> 
      <td> 
       <label> 
     <input type="checkbox" name="options" /> 
       </label> 
      </td> 
      <td> 
       Back-end Hook Up 

       <p id="">-Description about second sub task.</p> 
      </td> 
      </tr> 
     </table> 
     </td> 
     <td data-label="Detail Name"></td> 
     <td data-label="Detail Due Date">5/20/2016</td> 
     <td data-label="High Priority"> 

     <button> 
     <span>High Priority</span> 
     </button> 
     </td> 
     <td data-label="Add Detail, Edit, and Delete Buttons"> 

     <button> 
     <span>New</span> 
     </button> 

     <button> 
     <span>Edit</span> 
     </button> 

     <button> 
     <span>Delete</span> 
     </button> 
     </td> 
    </tr> 
    <!-- END OF ITEM ACTIVITY --> 
    </tbody> 
    <!-- END OF ITEM --> 
</table> 

Codepen- http://codepen.io/nagasai/pen/grGaWV