CODEWITHSUNDEEP
jqueryhtmlcss
Nagaraja Thangavelu
Nagaraja Thangavelu

Reputation: 1168

Select only a single column in a HTML table

I need to select the text of a single column from the HTML table using mouse pointer.

For example consider the following table.

enter image description here

In this table, I cannot select the the text of Lastname column alone. Instead, the rest of the table contents are also selected while dragging the mouse down.

The ultimate aim is to select each column separately.Is there is any way to select the text of single column in the table?

Tried all different options the -moz-user-select, but nothing worked out.

Upvotes: 9

Views: 36236

Answers (7)

EricG
EricG

Reputation: 65

I too needed to have selectable HTML columns. The answer from @DavidvanDriessche put me on the right path but like @Naja2Raja, I needed a dynamic column solution. I believe the following PHP code can lead you to a dynamic (unknown) column count solution.

<?php
$con=mysqli_connect("localhost","","","test");
// Check connection
if (mysqli_connect_errno())
  {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$sql="SELECT fName,email FROM Persons ORDER BY fname";

if ($result=mysqli_query($con,$sql))
  {
    // Start an HTML table for each field
    $table0 = "<table id=\"table0\" name=\"table0\">
              <tr><th>Last Name</th></tr>
    ";

    $table1 = "<table id=\"table1\" name=\"table1\">
              <tr><th>Age</th></tr>
    ";

   // Fetch one and one row
   while ($row=mysqli_fetch_row($result))
   {
    $table0 .= "<tr><td>". $row[0] ."</td></tr>\n";
    $table1 .= "<tr><td>". $row[1] ."</td></tr>\n";
   }

// Free result set
mysqli_free_result($result);

// Close HTML table
  $table0 .= "</table>";
  $table1 .= "</table>";

// Place HTML Column Tables into Single Row HTML table with a <td> 
// column for each HTML Column Table
echo "<table><tr>
        <td>
          $table0 
        </td>
        <td>
          $table1
        <td>
      </tr></table>";

}

mysqli_close($con);
?>

Upvotes: 1

Emily Moses
Emily Moses

Reputation: 1

This question is old, but I didn't really like the other answers. They seem more complex than necessary. I simply assigned classes.

.column2 {
}
<table>
  <tr>
    <th class="column1">Firstname</th>
    <th class="column2">Lastname</th>
  </tr>
  <tr>
    <td class="column1">Greg</td>
    <td class="column2">Smith</td>
  </tr>
  <tr>
    <td class="column1">Sam</td>
    <td class="column2">Flinstone</td>
  </tr>
 </table>

Upvotes: -2

David van Driessche
David van Driessche

Reputation: 7048

If you want columns to be selectable, you have to provide that structure in the HTML. And that will involve using tables within tables, like this: http://codepen.io/DavidvanDriessche/pen/jqbeqK

The basic approach is to make one outer table with a single row. This row has as many column (td) elements as required (while the example shows three, it can easily be adjusted to any number of columns you want/need.

These td elements contain their own table with nothing but rows (each row having a single column). Columns can now be selected individually.

<table><tr>

    <td>
      <table>
        <tr><th>First name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

    <td>
      <table>
        <tr><th>Last name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

    <td>
      <table>
        <tr><th>Third name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>  

</tr></table>

Upvotes: 12

vijay
vijay

Reputation: 306

        <style>
    table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
    }

    td, th, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
    }

    td:hover::after,
    .ff-fix:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
   }
   </style>
   <script>

    function tablefunhover() {

        var tds = document.getElementsByTagName( 'td' );

    for( var index = 0; index < tds.length; index++ ) {
        tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
    };

    var style = '<style>'
        + 'td { padding: 0 !important; }' 
        + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
        + '</style>';
    document.head.insertAdjacentHTML( 'beforeEnd', style );

    };
    tablefunhover();


   </script>
    <table>
    <tr>
        <th>Firstname</th><th>Lastname</th><th>Email</th>
    </tr>

    <tr>
        <td>xyz</td><td>xyz</td><td>xyz</td>
    </tr>

    <tr>
        <td>xyz</td><td>xyz</td><td>xyz</td>
    </tr>

    <tr>
        <td>xyz</td><td>xyz</td><td>xyz</td>
    </tr>

    <tr>
        <td>xyz</td><td>xyz</td><td>xyz</td>
    </tr>
   </table>

ref

Upvotes: 0

jack blank
jack blank

Reputation: 5203

Gets the second column. 

table th:nth-child(2), table td:nth-child(2){
    background: red;
}
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>surname</th>
  </tr>
  <tr>
    <td >Fred</td>
    <td>frankin</td>
    <td>mike</td>
  </tr>
  <tr>
    <td >Mike</td>
    <td>frankin</td>
    <td>jones</td>
  </tr>
 </table>

EDIT with borders

th, td{
  padding: .2em .5em;
}
table { border: none; border-collapse: collapse; }
table th:nth-child(2), table td:nth-child(2) { border-left: 3px solid brown; }
table th:nth-child(2), table td:nth-child(2) { border-right: 3px solid brown; }
table th:nth-child(2) { border-top: 3px solid brown; }
table tr:nth-of-type(3) td:nth-of-type(2){border-bottom: 3px solid brown;}
table td:first-child { border-left: none; }
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>surname</th>
    <th>Another</th>
  </tr>
  <tr>
    <td >Greg</td>
    <td>Fred</td>
    <td>mike</td>
    <td>Another</td>
  </tr>
  <tr>
    <td >Sam</td>
    <td>Flinstone</td>
    <td>jones</td>
    <td>Another</td>
  </tr>
 </table>

Upvotes: 1

Shohidul Alam
Shohidul Alam

Reputation: 703

add a class to your last name and add this css properties.

Here is another way on jsfiddle. 

table, th, td {
    border: 1px solid black;
}
.unselectable {
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select:none;
	user-select: none;
}
.selectable {
    -webkit-touch-callout: all;
	-webkit-user-select: all;
	-khtml-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	-o-user-select:all;
	user-select: all;
}
<html>
  <head>
  
  </head>
  <body>
    <h2>Add some css to lastname</h2>

    <table>
      <tr>
        <th class="unselectable">Firstname</th>
        <th class="selectable">Lastname</th>
      </tr>
      <tr>
        <td class="unselectable">Peter</td>
        <td class="selectable">Griffin</td>
      </tr>
      <tr>
        <td class="unselectable">Lois</td>
        <td class="selectable">Griffin</td>
      </tr>
     </table>
    
  </body>
</html>

Upvotes: 5

Arif Burhan
Arif Burhan

Reputation: 505

For alignment purposes you can also have tables within tables,

Schematic only:

OuterTable(
           td(leftColumnTable)/td 
           td(midColumnTable)/td
           td(rightColumnTable)/td
           )
/OuterTable

This will allow highlighting of individual columns, as well as the complete table.

Upvotes: 0

Related Questions