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

时间：2016-07-08 17:01:45

标签： html

我已经使用html创建了这个待办事项列表页面。他们显示任务的方式和子任务就是这样。

enter image description here

如果您注意到子任务，则完成复选框与子任务的名称位于同一列中。我如何将子任务复选框分配给他们自己的列，如任务复选框，但仍然保持子任务复选框和子任务名称与＆＃34;名称＆＃34;列？

这是代码。

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

2 个答案:

答案 0 :(得分：1)

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

我已经为每行添加了另一个<td>，或者有一个复选框。如果没有，您可以使用:empty CSS选择器以您喜欢的方式设置样式。

如果这是错误的，你可以张贴你想要的照片吗？你说你希望子任务的名称与＆＃34; name＆＃34;列标题，但您还希望复选框与其他子任务对齐，但不与主任务混合。我认为这是尽可能接近的。

<强>更新

你可以在桌子里放一张桌子！

我在这里更新了小提琴：https://jsfiddle.net/a8mo92mu/1/ 我已经在行内部创建了一个新的<table>来拥有自己的布局 - 您还需要使用colspan来制作跨越两个或三个跨度的单个列。

答案 1 :(得分：0)

要达到预期效果，请使用以下代码

<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

相关问题
最新问题