Tyler Zika Tyler Zika - 4 months ago 11
HTML Question

Implement a sub column/row in a table, purely with HTML

I've created this to do list page, using only html. They way I display tasks and sub tasks is like so.

enter image description here

If you notice on the sub task, the checkbox for completion is in the same column as the name of the sub task. How would I give the subtask checkboxes their own column like the task checkbox, but still keep the sub task checkbox and sub task name lined up with the "Name" column?

Here is the code.

<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

Using Tables, this is as close as we can get: https://jsfiddle.net/a8mo92mu/

I've added another <td> to each row that either has a checkbox or not. If it does not, you can use the :empty CSS selector to style it any way you'd like.

Can you post a picture of what you want if this is wrong? You say you want the name of the sub task lined up with the "name" column header, but you also want the checkbox to line up with other sub-tasks, but not mixed with the main task. I think this is as close as we can get.

UPDATE

You can put a table inside a table!

I've updated the fiddle here: https://jsfiddle.net/a8mo92mu/1/ I've made a new <table> inside of the row to have their own layout - You need to also use colspan to make a single column span across two or three spans.