Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 24.07.2019, 21:26   #1
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 88
Репутация: 10
По умолчанию Как сделать поля таблицы редактируемыми

Всем привет, я видел кучу статей про это, но мой вопрос немного частного случая (как мне кажется). Вот у меня есть поле "Лист", как мне в этом же поле сделать редактируемое место. Чтобы в итоге было : Лист 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>
Спасибо за внимание=)
Изображения
 
volni вне форума   Ответить с цитированием
Старый 24.07.2019, 23:02   #2
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
Репутация: 141
По умолчанию

Вот ваша таблица.
Внешним видом сейчас рекомендуется управлять через классы.
Код:
<!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>
__________________
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума   Ответить с цитированием
Старый 24.07.2019, 23:35   #3
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 88
Репутация: 10
По умолчанию

Цитата:
Сообщение от 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>
Я правильно понимаю, что вы как раз добавили дополнительный столбец для ввода?=)
volni вне форума   Ответить с цитированием
Старый 25.07.2019, 01:17   #4
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
Репутация: 141
По умолчанию

Цитата:
Сообщение от volni Посмотреть сообщение
Я правильно понимаю, что вы как раз добавили дополнительный столбец для ввода?=)
Ну да. Здесь это оптимальный вариант.
__________________
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума   Ответить с цитированием
Старый 25.07.2019, 21:13   #5
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 88
Репутация: 10
По умолчанию

Цитата:
Сообщение от 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;
}
Окно ввода работает и настраивает его по размерам ячейки, а вот граница не стирается=(
volni вне форума   Ответить с цитированием
Старый 26.07.2019, 00:58   #6
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
Репутация: 141
По умолчанию

Скопируйте разметку из примера
Код:
<table class="table">
__________________
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума   Ответить с цитированием
Старый 26.07.2019, 11:36   #7
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 88
Репутация: 10
По умолчанию

Цитата:
Сообщение от web-coder Посмотреть сообщение
Скопируйте разметку из примера
Код:
<table class="table">
Спасибо,помогло,а все-таки в чем дело было?=)
volni вне форума   Ответить с цитированием
Старый 26.07.2019, 17:14   #8
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
Репутация: 141
По умолчанию

Цитата:
Сообщение от volni Посмотреть сообщение
в чем дело было?=)
В классе. CSS правила я прописал для класса table, а не для всех таблиц.
__________________
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума   Ответить с цитированием
Старый 01.08.2019, 17:13   #9
volni
Форумчанин
 
Регистрация: 16.03.2019
Сообщений: 88
Репутация: 10
По умолчанию

Цитата:
Сообщение от web-coder Посмотреть сообщение
В классе. CSS правила я прописал для класса table, а не для всех таблиц.
Здравствуйте, еще такой вопрос, возможно ли как-то убрать рамки окошек ввода?То есть, чтобы их было незаметно.
volni вне форума   Ответить с цитированием
Старый 01.08.2019, 17:19   #10
Вадим Мошев

Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: programmersforum
Сообщений: 8,481
Репутация: 4056
По умолчанию

Цитата:
Сообщение от volni Посмотреть сообщение
возможно ли как-то убрать рамки окошек ввода?
css свойство border: 0
Вадим Мошев вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


09:19.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.