Sử dụng Selector CSS để chọn một trong bảng

[TDM (Đạt Phạm)]

Mình có một cái bảng như thế này:

Bây giờ mình muốn chọn tất cả các cột có đoạn text là: Hệ điều hành Windows để căn giữa thì dùng Selector nào ?

Đây là code HTML của mình

	<div id="table">
		<table border="1">
			<thead>
				<tr>
					<td rowspan="2">Nhóm học phần</td>
					<td rowspan="2">Môn học</td>
					<td colspan="2">Số tiết</td>
				</tr>
				<tr>
					<td>Lý thuyết</td>
					<td>Thực hành</td>
				</tr>
			</thead>

			<tbody>
				<tr id="tinhoc">
					<td rowspan="7">
						I<br/>
						Tin học văn phòng
					</td>
				</tr>

				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>


				<tr id="kythuat">
					<td rowspan="3">
						II<br/>
						Kỹ thuật lập trình VB.Net
					</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>

				<tr id="more">
					<td colspan="5">...</td>
				</tr>
				
			</tbody>
		</table>
	</div>

[drgnz]

Đây là code CSS của mình
Có sao đọc vậy nên cái selector nó xấu tệ

tbody > tr:not(:first-child):not(:last-child):not(#kythuat) > td:first-child {
    background: red;
}

[Lovemagic]

jQuery có contains

x = $('td:contains("Hệ điều hành Windows")');
Array.from(x).map(v => v.style.color = 'red');

[Gony (Trường Giang)]

<style>
    #center {
         text-align: center;
}
</style>

Go dùng id center cho

tag ở mỗi dòng “Hệ điều hành windows”. Như vậy cho dù bảng có thay đổi kích thước, thì text bên trong vẫn được căn giữa.

<td id="center">hệ điều hành Windows<td>

Bạn có thể áp dụng cho

tag nếu muốn mọi text trong tag được căn giữa bằng CSS selector như sau:

<style>
tr {
      text-align: center;
}
</style>

Ví dụ code của Go trong case này là:

<style>
	#center {
		text-align: center;
	}
</style>

<div id="table">
		<table border="1">
			<thead>
				<tr>
					<td rowspan="2">Nhóm học phần</td>
					<td rowspan="2">Môn học</td>
					<td colspan="2">Số tiết</td>
				</tr>
				<tr>
					<td>Lý thuyết</td>
					<td>Thực hành</td>
				</tr>
			</thead>

			<tbody>
				<tr id="tinhoc">
					<td rowspan="7">
						I<br/>
						Tin học văn phòng
					</td>
				</tr>

				<tr>
					<td id="center">Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td id="center">Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td id="center">Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td id="center">Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td id="center">Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td id="center">Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>


				<tr id="kythuat">
					<td rowspan="3">
						II<br/>
						Kỹ thuật lập trình VB.Net
					</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>Hệ điều hành Windows</td>
					<td>1</td>
					<td>1</td>
				</tr>

				<tr id="more">
					<td colspan="5">...</td>
				</tr>
				
			</tbody>
		</table>
	</div>

[TDM (Đạt Phạm)]

Thank you Thank you

[TDM (Đạt Phạm)]

Cảm ơn bạn nhé !

[TDM (Đạt Phạm)]

Ok, thank you so much