Question

似乎跨越多个单元格的按钮的可点击区域仅在其源自的单元格上定义。有人会知道如何在跨越的所有细胞中扩展它吗？请参阅代码段。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="custom-scroll table-responsive">
<table class="table table-bordered table-nonfluid" style="width:100%; table-layout:fixed;">
  <thead>
    <tr>
      <th style="vertical-align:middle;">2012</th>
      <th style="vertical-align:middle;">2013</th> 
      <th style="vertical-align:middle;">2014</th>  
      <th style="vertical-align:middle;">2015</th>
      <th style="vertical-align:middle;">2016</th> 
      <th style="vertical-align:middle;">2017</th>
      <th style="vertical-align:middle;">2018</th>
    <tr> 
  </thead>
  <tbody>
    <tr>
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
      <td style="padding-left: 50px; padding-right: 0px; position: relative;"><button class="btn btn-success btn-xs btn-block" style="width:200px">edit</button></td>    
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
    <tr>
  </tbody>  
</table>
</div>

Answer 1

您可以使用position:relative; + z-index:1;将其置于最前面。

但我相信最好是跨越正在举行的单元格，以便在屏幕阅读器或任何类型的引擎读取时保持表格的完整含义。（删除样式和显而易见的编辑按钮位于单个单元格中

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="custom-scroll table-responsive">
<table class="table table-bordered table-nonfluid" style="width:100%; table-layout:fixed;">
  <thead>
    <tr>
      <th style="vertical-align:middle;">2012</th>
      <th style="vertical-align:middle;">2013</th> 
      <th style="vertical-align:middle;">2014</th>  
      <th style="vertical-align:middle;">2015</th>
      <th style="vertical-align:middle;">2016</th> 
      <th style="vertical-align:middle;">2017</th>
      <th style="vertical-align:middle;">2018</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
      <td style="padding-left: 50px; padding-right: 0px; position: relative;"><button class="btn btn-success btn-xs btn-block" style="width:200px;position:relative;z-index:1;">edit</button></td>    
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
      <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
    </tr>
  </tbody>  
</table>
</div>

注意 200px将在小屏幕上跨越几个单元格，但在大屏幕上只有一个:( （点击整页以查看代码段）

Answer 2

在colspan中使用td：<td colspan="3">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="custom-scroll table-responsive">
<table class="table table-bordered table-nonfluid" style="width:100%; table-layout:fixed;">
  <thead>
    <th style="vertical-align:middle;">2012</th>
    <th style="vertical-align:middle;">2013</th> 
    <th style="vertical-align:middle;">2014</th>  
    <th style="vertical-align:middle;">2015</th>
    <th style="vertical-align:middle;">2016</th> 
    <th style="vertical-align:middle;">2017</th>
    <th style="vertical-align:middle;">2018</th>
  </thead>
  <tbody>
    <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
    <td colspan="3"><button class="btn btn-success btn-xs btn-block">edit</button></td>    
    <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
    <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
    <td style="padding-left: 0px; padding-right: 0px; position: relative;"></td>
  </tbody>  
</table>
</div>

带有按钮的HTML表格，该按钮跨越多个单元格可点击区域

2 个答案: