Menu
I need to select the text of a single column from the HTML table using mouse pointer.
For example consider the following table.
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.
322
To select data in the second column of the following HTML table, hold down Ctrl and click the Example 2 cell and drag down to Four. Once selected press Ctrl + C to copy the data, and then Ctrl + V to paste it elsewhere. Six.
Select the text in a column(s) with the Option key pressed, which allows one to select anything inside a rectangular area that you draw, similar to Photoshop's rectangular lasso tool. Copy the selection and paste to wherever you need.
- Hold Alt and click to select cells, Alt + Ctrl to select a column... - or use hotkeys and menus to select and copy.
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>
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>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>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);
?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
