Question

我在容器内有一个表，但是一旦我通过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>

我不知道为什么在这里出现错误。调整屏幕大小后，在我的屏幕上看起来像这样：

如果没有任何直接方法可以始终将其保留在容器中，则可以通过隐藏大小调整某些字段的方式，以便在移动屏幕上显示的所有内容均为“标题”，“编辑”和“删除” ？

Answer 1

将此添加到CSS中以使表在移动设备上响应：

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}

Answer 2

尝试应用width：inherit;设置为相应的div，它们将继承其父级的宽度。

如何在容器中对齐表格？

2 个答案: