У меня есть таблица внутри контейнера, но как только я добавляю в нее элементы через PouchDB / JS, таблица становится слишком большой для контейнера.Кто-нибудь получил представление о том, как я могу сохранить размер таблицы относительно ее контейнера?Я пытаюсь сделать дизайн отзывчивым.Вот мой код.
@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #e0e0e0;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
@media only screen and (max-width: 700px) {
.row {
grid-template-columns:1fr;
}
}
.oldFilm {
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: black;
padding-bottom: 20px;
}
td {
padding: 5px;
width: 10%;
}
table {
border-collapse: collapse;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>The Reviewser</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<img src="img/rv-logo.png">
<p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
</header>
<div class="newFilm">
<h2 id='formTitle'>Add a new review!</h2>
<div class="form">
<form>
<div class="row">
<div class="col">
<label for="title">Title:</label><input type="text" id="title" placeholder="Title of the film (and year)">
<label for="image">Image:</label><input type="text" id="image" placeholder="URL to artwork for the film">
<label for="rating">Rating:</label><input type="number" id="rating" min="1" max="10" placeholder="How do you rate this film out of 10?">
<label for="genre">Genre:</label>
<select id="genre">
<option value="" disabled selected>What genre does the film fit into?</option>
<option value="action">Action</option>
<option value="comedy">Comedy</option>
<option value="horror">Horror</option>
<option value="other">Other</option>
</select>
</div>
<div class="col">
<label for="synopsis">Synopsis:</label>
<textarea rows="14" id="synopsis" placeholder="What is the story behind the film? (Spoiler alert!)"></textarea>
</div>
</div>
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>
<div class="oldFilm">
<h2 id='oldTitle'>Previous reviews</h2>
<div class="table">
<table>
<thead>
<tr>
<td>Image</td>
<td>Title</td>
<td>Genre</td>
<td>Rating</td>
<td>Synopsis</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</thead>
<tbody id='reviewList'>
</tbody>
</table>
</div>
</div>
<!-- PouchDB CDN (Direct link to PouchDB online) -->
<script src="https://cdn.jsdelivr.net/npm/pouchdb@6.3.4/dist/pouchdb.min.js"></script>
<script>
// Creates a new database titled "films"
var db = new PouchDB('films');
// Keep track of whether or not we're editing a review
var editMode = false;
// Update list when page is refreshed
updateReviewList();
// Add an event listener to the add/edit form.
document.getElementById('modifyFilmButton').addEventListener('click', modifyReview);
function modifyReview(evt){
// Prevents page from refreshing when submit button is pressed
evt.preventDefault();
// Checks to see if in edit mode
if(editMode){
// If it is in edit mode (editMode == true), we edit a review by first
// getting it out of the database. This ensures we have the correct revision
// value for when saving
db.get(document.getElementById('id').value).then(function(thisFilm){
thisFilm.title = document.getElementById('title').value;
thisFilm.image = document.getElementById('image').value;
thisFilm.genre = document.getElementById('genre').value;
thisFilm.rating = document.getElementById('rating').value;
thisFilm.synopsis = document.getElementById('synopsis').value;
db.put(thisFilm).then(function(){
// When the update is complete, reset things.
switchEditMode(false);
updateReviewList();
clearForm();
})
})
} else {
// If editMode is false, add new review. In this case, the
// first thing we need to do is to create a new id. We're doing a bit of an odd
// thing here. We're creating a sequential numerical id, but it needs to be stored
// as a string.
// We first get all the documents in the database.
db.allDocs().then(function(docs){
// Our default id is going to be 0. This will be the case if there aren't already
// any records in the database.
let newID = '0';
// If there are existing records however...
if(docs.rows.length > 0){
// We get the id of the last record in the set. We need to convert it to
// an integer too so that we can add 1 to it.
let highestID = parseInt(docs.rows[docs.rows.length-1].id);
// We then use this to set the value of newID, converting it back to a
// string ready to save into the database.
newID = (highestID + 1).toString();
}
var newReview = {
_id: newID,
title: document.getElementById('title').value,
genre: document.getElementById('genre').value,
rating: document.getElementById('rating').value,
synopsis: document.getElementById('synopsis').value,
image: document.getElementById('image').value,
}
// and then save the film.
db.put(newReview).then(function() {
// With the new film saved, we clear the form and update the film list.
clearForm();
updateReviewList();
})
});
}
}
function updateReviewList() {
// There are a few places where we want to update the list of films, so it makes sense to
// pull this out into a function so we don't have to repeat the same code in a bunch of
// places. We start off by getting all the records in the database.
// The option here - {include_docs: true} - just ensures that we get the full version
// of each record in the response, where normally we would just get the id and rev values.
db.allDocs({include_docs: true}).then(function(films){
// We're going to build up a string of HTML to insert into the DOM, so we start off with an
// empty string.
let listContents = '';
// We then need to loop through each row that comes back from the database. You might
// want to log the films object here to see what actually comes back, as it's a little
// bit more complex than just a list of records. We get a total_rows property for example.
// We could just of easily of used films.rows.length.
for(let i = 0; i < films.total_rows; i++) {
// We pull out the film at position i in the list. It's worth pointing out that
// we need to then go into its doc property to get the full record.
let thisFilm = films.rows[i].doc;
// We're creating the string for the edit and delete buttons seperately, and will insert
// then in shortly. It just makes it a bit easier to understand doing it like this.
// In each case, it's a button with an onclick event handler that takes the id of
// this particular film as an argument.
let editButton = '<button onclick="editReview(\'' + thisFilm._id + '\')">Edit</button>';
let deleteButton = '<button onclick="deleteReview(\'' + thisFilm._id + '\')">Delete</button>';
let image = '<img class="reviewImage" src="' + thisFilm.image +'">'
// Now we can add to the string of HTML. This is a full table row, as we're going to be
// inserting this into the table body.
listContents += '<tr><td>'+ image +'</td><td>' + thisFilm.title + '</td><td>' + thisFilm.genre + '</td><td>' + thisFilm.rating + '</td><td>' + thisFilm.synopsis + '</td><td>' + editButton + '</td><td>' + deleteButton + '</td></tr>';
}
// With the loop complete, we now have a string of HTML that contains a table row for
// each film in the databse. We can now insert this into the table body.
document.getElementById('reviewList').innerHTML = listContents;
})
}
// This is the function that gets called when the user clicks an Edit button on
// a film in the list.
function editReview(id) {
// We need to grab the film out of the database so that we can fill in the form
// with the current values for each property.
db.get(id).then(function(film) {
// We run the switchEditMode function first, and then fill in the form.
// The actual editing of the record is handled when the user hits the
// Edit film! button on the form.
switchEditMode(true);
document.getElementById('id').value = film._id;
document.getElementById('title').value = film.title;
document.getElementById('image').value = film.image;
document.getElementById('rating').value = film.rating;
document.getElementById('genre').value = film.genre;
document.getElementById('synopsis').value = film.synopsis;
})
}
// This function is run when the user hits a Delete button on the film list.
function deleteReview(id) {
// We use a confirm alert to safety check. This pops up an alert for the user that
// displays the text given, along with a Cancel and an OK button. If they hit OK, then
// it returns true, so we can use this run some code.
const conf = confirm('Are you sure you want to delete this review? You will have to write it again if so!');
if(conf){
// If the user hit OK, we first get the full record for the film..
db.get(id).then(function(thisFilm) {
// ..and then tell the database to remove it.
// db.remove() returns a promise, so by returning the promise from the
// function we can string a .then() on the end, rather than nest it here.
return db.remove(thisFilm);
}).then(function(){
// When the record has been removed, we update the list of films.
updateReviewList();
})
}
}
// This function gets run from a few places, so we combine the code here.
function switchEditMode(newEditMode){
if(newEditMode){
// If we're switching to edit mode we update the global editMode variable
// and change the form title and button label.
editMode = true;
document.getElementById('formTitle').innerHTML = 'Edit a review';
document.getElementById('modifyFilmButton').innerHTML = 'Edit review!';
} else {
// If we're switching out of edit mode.
editMode = false;
document.getElementById('formTitle').innerHTML = 'Add a new review';
document.getElementById('modifyFilmButton').innerHTML = 'Add review!';
}
}
// As we've prevented the page from refreshing when a new film is added or edited,
// we need to manually clear out the form now and then.
function clearForm() {
document.getElementById('id').value = '';
document.getElementById('title').value = '';
document.getElementById('genre').value = '';
document.getElementById('rating').value = '';
document.getElementById('synopsis').value = '';
document.getElementById('image').value = '';
}
</script>
</body>
</html>
Я не знаю, почему здесь появляется ошибка.На моем экране это выглядит так, когда размер экрана изменяется: 
Если нет прямого способа сделать так, чтобы он всегда оставался внутри контейнера, есть ли способ скрытьопределенные поля для изменения размера, чтобы при отображении на экранах мобильных устройств отображались только «Заголовок», «Редактировать» и «Удалить»?