CODEWITHSUNDEEP
htmlcss
spitz
spitz

Reputation: 668

HTML table with button that spans multiple cells clickable area

It seems that the clickable area of a button spanning multiple cells is only defined on the cell where it originates from. Would anyone know how to extend it across all cells it spans? Please see snippet for example. 

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

Upvotes: 0

Views: 410

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105893

You could use position:relative; + z-index:1; to bring it at front.

But i believe the best woud be to span the cell where it is being hold to keep the full meaning of your table if read by a screenreader or any kind of engines.(remove styles and it is obvious edit button stands in a single cell)

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

NOTE that 200px will span a few cells on a small screen , but only one on big screen :( (hit full page to see snippet in action )

Upvotes: 1

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

use colspan in 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>

Upvotes: 1

Related Questions