#html #css
Вопрос:
Я создаю редактируемую таблицу html, и я хотел бы знать, как я могу придать более одного значения одной ячейке со статическим словом посередине, например:
У меня это уже есть:
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } lt;tablegt; lt;trgt; lt;thgt;Dayslt;/thgt; lt;thgt;Work Schedulelt;/thgt; lt;thgt;Rest and Meal Intervallt;/thgt; lt;/trgt; lt;trgt; lt;tdgt;Mondaylt;/tdgt; lt;td contenteditable='true'gt;This is editablelt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Tuesdaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Wednesdaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Thursdaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Fridaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Saturdaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Sundaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;/tablegt; И я хотел бы иметь это:
Таким образом, слово às всегда будет находиться в середине этих ячеек, и мне нужен пробел до и после него, чтобы записать некоторые значения.
Ответ №1:
Если вы хотите, чтобы что-то было в одном столбце, вам нужно будет изменить td , чтобы оно содержало два ввода и текст между ними, что-то вроде этого:
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } input { border: 1px solid #dddddd; text-align: left; box-sizing: border-box; width: 40%; height: 100% } span { width: 10%; margin-left: 5%; margin-right: 5%; } lt;tablegt; lt;trgt; lt;thgt;Dayslt;/thgt; lt;thgt;Work Schedulelt;/thgt; lt;thgt;Rest and Meal Intervallt;/thgt; lt;/trgt; lt;trgt; lt;tdgt;Mondaylt;/tdgt; lt;tdgt;lt;input type="text"/gt;lt;spangt;àslt;/spangt;lt;input type="text"/gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Tuesdaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Wednesdaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Thursdaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Fridaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Saturdaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;Sundaylt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;td contenteditable='true'gt;lt;/tdgt; lt;/trgt; lt;/tablegt; Очевидно, что потребуется какой-то дополнительный CSS, чтобы он выглядел красиво.