Table в html/css?

Question

[Игорь Касперский]

Всем привет, вопрос - как окутать в solid border определенную часть одной таблицы?
https://jsfiddle.net/dcrscczz/3/

<table>
			<tr>
				<td></td><th style="font-size:25" colspan="5" rowspan="5">H</th>
				<td></td><td></td><td></td><td></td>
				<td style="font-size:8px">1</td>
				<td></td>

				<td rowspan="7" colspan="129" align="center" style="font-size:45pt; padding:0" >ТАБЛИЦА МЕНДЕЛЕЕВА</td>

				<td></td><th style="font-size:25" colspan="5" rowspan="5">He</th>
				<td></td><td></td><td></td><td></td>
				<td style="font-size:8px">2</td>
				<td></td>
			</tr>
			<tr>
				<td></td><td></td><td></td><td></td><td></td>
				<td></td><td></td>

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

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

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

				<td></td><td></td><td></td><td></td><td></td>
				<td></td><td></td>
			</tr>
			<tr>
				<td></td><td style="font-size:10" colspan="5">ВОДОРОД</td>
				<td></td><td></td><td></td><td></td>
				<td></td><td></td>

				<td></td><td style="font-size:10" colspan="5">ГЕЛИЙ</td>
				<td></td><td></td><td></td><td></td>
				<td></td><td></td>
			</tr>
			<tr>
				<td></td><td style="font-size:10" colspan="5">1.008</td>
				<td></td><td></td><td></td><td></td>
				<td></td><td style="font-size:8px">1</td>

				<td></td><td style="font-size:10" colspan="5">4.003</td>
				<td></td><td></td><td></td><td></td>
				<td></td><td style="font-size:8px">2</td>
			</tr>
...
</table>

вот эту часть до троеточия

Answer 1

[Сергей delphinpro]

Части таблицы можно оборачивать в отдельные теги tbody (их может быть несколько). Ему можно задать рамку.
При этом стоит иметь ввиду схлопывание границ (свойство border-collapse)

Comments

[Игорь Касперский]

Вообще не реагирует

[Игорь Касперский]

А, обернул эту часть таблицы, поменял bgcolor:#000; и вся таблица стала #000

Answer 2

[heartdevil]

Привет.

1) Можете использовать вложенные таблицы. Те блоки, которые надо выделить, сделайте внутренними таблицами одной внешней таблицы. Тогда у вас будет контроль над отдельными частями.

2)Можете попробовать использовать селектор :nth-child(n)
Но вам придется разграничить отдельные tr и td в таблице, присвоив им id, чтобы упрявлять выделением отдельных блоков таблицы.

3) Самый долгий и муторный -- это присвоить уникальные id для всех tr (и для некоторых td) которые вы хотите выделять в таблице. Тогда у вас будут идентификаторы доступа к которым вы сможете задать стили.

Comments

[Игорь Касперский]

Какие вложенные/внутренние? thead, tbody, tfoot? Или же сделать 80 шт с чем то TABLE?

[heartdevil]

Игорь Касперский: Да, я имел ввиду именно полноценные вложенные таблицы (table+tr+td). У вас изначально таблица сложная, поэтому таблиц нужно столько, сколько областей в основной таблице вы хотите выделить.

[Игорь Касперский]

heartdevil: ну капец, куда же такие сложности, почему елки-палки не работает tbody в моей таблице. А вот если в этой таблице сделать и tbodyheadfoot то эти теги работают, ура, теперь с ними надо грамотно поступить, но все равно, куда такие сложности

[Игорь Касперский]

heartdevil: просто изначально я хотел сделать без использования margin и т.д., ведь вложенные таблицы придется передвигать?

[heartdevil]

Игорь Касперский: Попробуйте маленькую таблицу сделать и там задать tbody и ему прописать стиль. Если получится значит вам надо будет постепенно из этой маленькой таблицы сделать вашу основную таблицу. То есть по частям перенести все строки. Я думаю, у вас должно получиться обойтись только tbody, но и этому тегу придется задать id, так как у вас таких тэгов тоже должно быть несколько и их надо отличать. Начните создавать таблицу без каких либо стилей вообще. И задайте стиль только tbody. Тогда вы сможете понять, где у вас ошибка и какие-то стили не работают или перетираются.

[Игорь Касперский]

heartdevil: эммм, а что, tbody нельзя окутать border?

[heartdevil]

Игорь Касперский: Можно. В этом и суть). Вы же не хотите разбивать большую таблицу на множество вложенных. Я вам советую делать все по частям. Сделайте сначала маленькую таблицу без стилей, но с разбиением на tbody. Попробуйте придать бордеры только через tbody. Должно получиться. Поле этого добавляйте по частям другие элементы вашей таблицы. Так вы сможете на каждом шагу контролировать свою верстку таблицы и смотреть, что уже получилось, а что нет, нежели копаться в огромном коде таблицы (который сейчас) с разными стилями и думать, почему и что не работает. Локализуйте свой шаг, тогда и отвлечений меньше будет.

[Игорь Касперский]

heartdevil: лол, ставлю, ставлю, ставлю border: 1px solid; , и не могу понять, устал уже, плюнул) поставил outline: 1px solid; и всё, работаеттттттт