Как сделать поля таблицы редактируемыми - HTML и CSS

volni · 24.07.2019, 20:26

Всем привет, я видел кучу статей про это, но мой вопрос немного частного случая (как мне кажется). Вот у меня есть поле "Лист", как мне в этом же поле сделать редактируемое место. Чтобы в итоге было : Лист 1, Лист 2, и т.д.
У меня была идея делать два поля и между ними стирать границу, но как это сделать я тоже не знаю, да и может есть более "прямые" способы.
В html файле выглядит так:

Код:

<table border="2" width="765" height="530" cellpadding="2">
    <tr height="26,5" align="left">
        <td rowspan="2"> </td>
        <td>Лист</td>
        <td colspan="5" rowspan="2"> </td>
        <td colspan="4" rowspan="2"> </td>
    </tr>

Спасибо за внимание=)

web-coder · 24.07.2019, 22:02

Вот ваша таблица.
Внешним видом сейчас рекомендуется управлять через классы.

Код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			box-sizing: border-box;
		}
		.table{
			width: 765px;
			height: 530px;
			border-collapse: collapse;
			border: 2px solid black;
			border-spacing: 0;
		}
		.table td{
			padding: 5px;
			border: 1px solid black;
		}
		.table-field {
			width: 100%;
			height: 100%;
		}
		.table td.b-r-0{
			border-right: 0;
		}
		.table td.b-l-0{
			border-left: 0;
		}
	</style>
</head>
<body>
	<form action="">
		<table class="table">
			<tr>
				<td rowspan="2">
					<input type="text" class="table-field">
				</td>
				<td class="b-r-0">
					Лист
				</td>
				<td class="b-l-0">
					<input type="text" class="table-field">
				</td>
			</tr>
			<tr>
				<td class="b-r-0">
					Продолж. на листе
				</td>
				<td class="b-l-0">
					<input type="text" class="table-field">
				</td>
			</tr>
			<tr>
				<td>
					Подразд.
				</td>
				<td colspan="2">
					<input type="text" class="table-field">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

volni · 24.07.2019, 22:35

Цитата:

Сообщение от web-coder

Вот ваша таблица.
Внешним видом сейчас рекомендуется управлять через классы.

Код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			box-sizing: border-box;
		}
		.table{
			width: 765px;
			height: 530px;
			border-collapse: collapse;
			border: 2px solid black;
			border-spacing: 0;
		}
		.table td{
			padding: 5px;
			border: 1px solid black;
		}
		.table-field {
			width: 100%;
			height: 100%;
		}
		.table td.b-r-0{
			border-right: 0;
		}
		.table td.b-l-0{
			border-left: 0;
		}
	</style>
</head>
<body>
	<form action="">
		<table class="table">
			<tr>
				<td rowspan="2">
					<input type="text" class="table-field">
				</td>
				<td class="b-r-0">
					Лист
				</td>
				<td class="b-l-0">
					<input type="text" class="table-field">
				</td>
			</tr>
			<tr>
				<td class="b-r-0">
					Продолж. на листе
				</td>
				<td class="b-l-0">
					<input type="text" class="table-field">
				</td>
			</tr>
			<tr>
				<td>
					Подразд.
				</td>
				<td colspan="2">
					<input type="text" class="table-field">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

Я правильно понимаю, что вы как раз добавили дополнительный столбец для ввода?=)

web-coder · 25.07.2019, 00:17

Цитата:

Сообщение от volni

Я правильно понимаю, что вы как раз добавили дополнительный столбец для ввода?=)

Ну да. Здесь это оптимальный вариант.

volni · 25.07.2019, 20:13

Цитата:

Сообщение от web-coder

Ну да. Здесь это оптимальный вариант.

Что-то у меня не выходит стиреть границу=(

Код:

<table border="2" width="765" height="530" cellpadding="2">
    <tr height="26,5" align="left">
        <td rowspan="2"> </td>
        <td width="6.937%" class="b-r-0">Лист</td>
		<td width="3%" class="b-l-0"><input type="text" class="table-field"> </td>
        <td colspan="5" rowspan="2"> </td>
        <td colspan="4" rowspan="2"> </td>

А настройку я прописал в css файле:

Код:

.table-field {
			width: 100%;
			height: 100%;
}
		
.table td.b-r-0{
			border-right: 0;
			
}

.table td.b-l-0{
			border-left: 0;
}

Окно ввода работает и настраивает его по размерам ячейки, а вот граница не стирается=(

web-coder · 25.07.2019, 23:58

Скопируйте разметку из примера

Код:

<table class="table">

volni · 26.07.2019, 10:36

Цитата:

Сообщение от web-coder

Скопируйте разметку из примера

Код:

<table class="table">

Спасибо,помогло,а все-таки в чем дело было?=)

web-coder · 26.07.2019, 16:14

Цитата:

Сообщение от volni

в чем дело было?=)

В классе. CSS правила я прописал для класса table, а не для всех таблиц.

volni · 01.08.2019, 16:13

Цитата:

Сообщение от web-coder

В классе. CSS правила я прописал для класса table, а не для всех таблиц.

Здравствуйте, еще такой вопрос, возможно ли как-то убрать рамки окошек ввода?То есть, чтобы их было незаметно.

Вадим Мошев · 01.08.2019, 16:19

Цитата:

Сообщение от volni

возможно ли как-то убрать рамки окошек ввода?

css свойство border: 0

25.07.2019, 23:58	#6
web-coder Пользователь Регистрация: 27.05.2019 Сообщений: 70	Скопируйте разметку из примера Код: `<table class="table">` Лучший сервис выбора хостинга по параметрам. Более 600 тарифов. Есть промокоды!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Обновление таблицы из Поля	govorun1	Microsoft Office Access	1	27.01.2015 15:59
Зависимые поля таблицы	Dimidr0l	Microsoft Office Access	1	01.06.2011 10:48
Access ограничить значение поля таблицы значениями полей другой таблицы	Сергей089	Microsoft Office Access	10	08.12.2010 02:22
Как сделать таблицу (в Delphi) с редактируемыми ячейками	duhduhduh	Компоненты Delphi	2	14.07.2010 13:55
просмотр поля Таблицы	Anna_fors	Компоненты Delphi	3	05.06.2009 15:16