JSFiddle - React, Tailwind, and code Playground

by paffffff

HTML

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Подсветка колонки при клике на ячейку</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script>
		jQuery(document).ready(function($) {
			$('table').on('click', 'td', function () {
				var thisIndex = $(this).index();
				// console.log(thisIndex);
				$('table tr').each(function(){
					$(this).children('td').each(function(td_num){
						if(td_num==thisIndex){
							$(this).addClass('selected').siblings().removeClass('selected'); 
						}
					})
				})
			});
		});
	</script>
	<style>
		table {
			border-collapse: collapse;
			border-spacing: 0;
			margin: 50px auto;
		}

		table td {
			border: solid 1px transparent;
			border-bottom: solid 1px #ccc;
			border-right: none;
			padding: 5px 6px;
		}
		table tr:last-child td {
			border-bottom-color: transparent;
		}
		td.selected {
			border-left: solid 1px #f96;
			border-right: solid 1px #f96;
			background: #fafafa;
		}
		td.selected:last-child {
			padding: 5px 5px 5px 6px; /* нужно убавлять отступ на 1px у последних ячеек, что бы не прыгал размер*/
		}
		table tr:first-child td.selected {
			border-top: solid 1px #f96;
		}
		table tr:last-child td.selected {
			border-bottom: solid 1px #f96;
		}

	</style>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil amet asperiores id animi voluptas labore molestias deleniti et debitis quibusdam nisi assumenda odit exercitationem rem recusandae perferendis fugit maiores!</p>
	<table>
		<tr>
			<td>колонка 1</td>
			<td>колонка 2</td>
			<td>колонка 3</td>
			<td>колонка 4</td>
			<td>колонка 5</td>
			<td>колонка 6</td>
		</tr>
		<tr>
			<td>колонка 1</td>
			<td>колонка 2</td>
			<td>колонка 3</td>
			<td>колонка 4</td>
			<td>колонка 5</td>
			<td>колонка 6</td>
		</tr>
		<tr>
			<td>колонка 1</td>
			<td>колонка 2</td>
			<td>колонка 3</td>
			<td>колонка 4</td>
			<td>колонка 5</td>
			<td>колонка...