Как сохранить корпус стола нетронутым на небольших мобильных экранах - PullRequest
Новая
       5

Как сохранить корпус стола нетронутым на небольших мобильных экранах

0 голосов
/ 25 мая 2020

Я работаю над этим проектом почтового запроса, но у меня проблема с телом таблицы на мобильном устройстве.

Тело стола ломается и смещается на небольших мобильных экранах. Нарушение происходит около 329vw

Я попытался уменьшить ширину и правое заполнение ячейки img, а также заполнение ячеек tbody для меньших экранов, но это не решает проблему полностью

Есть ли лучший способ предотвратить поломку корпуса стола на экранах меньшего размера? 

#mail-request-table {
  width: 100%;
  overflow: hidden;
  margin-top: 3rem;
  border-collapse: collapse;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14)
}

#mail-request-table thead th,
#mail-request-table tbody td {
  padding: 1.5rem
}

#mail-request-table thead tr {
  background-color: #00bf6f;
  background-color: #2f2f2f;
  background-color: #000
}

#mail-request-table thead tr th {
  color: #fff;
  text-align: left;
  font-size: 1.4rem;
  font-weight: bold
}

#mail-request-table tbody tr {
  background-color: #fff
}

#mail-request-table tbody tr:nth-child(even) {
  background-color: #eeeeee7d;
  background-color: #f5f5f5
}

#mail-request-table tbody tr td {
  font-size: 1.2rem
}

#mail-request-table tbody tr .mail-image {
  width: 11rem;
  padding-right: 3rem
}

#mail-request-table tbody tr .mail-image img {
  width: 100%;
  cursor: pointer;
  border-radius: 4px
}

#mail-request-table tbody .request-status {
  width: 7.5rem;
  display: block;
  color: #fff;
  padding: 0.4rem;
  font-weight: bold;
  border-radius: 5px;
  text-align: center
}

#mail-request-table tbody .request-status.status-pending {
  background-color: #f7b911
}

#mail-request-table tbody .request-status.status-rejected {
  background-color: #ff3131
}

#mail-request-table tbody .request-status.status-approved {
  background-color: #00bf6f
}

 .pagination-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #eee;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14);
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14)
}

.pagination-container button {
  color: #6c6c70;
  background-color: transparent
}

 .pagination-container .pagination-outer-btn {
  border-radius: 3px;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.14)
}

.pagination-container .pagination-outer-btn#pagination-last-page {
  color: #00bf6f
}

.pagination-container .pagination-inner-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.pagination-container .pagination-inner-container .pagination-inner-btn {
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease
}

.pagination-container .pagination-inner-container .pagination-inner-btn:hover {
  color: #00bf6f
}

.pagination-container .pagination-inner-container #pagination-prev-page {
  margin-right: 1.2rem
}

.pagination-container .pagination-inner-container #pagination-next-page {
  margin-left: 1.2rem
}

.pagination-container .pagination-inner-container .page-numbers span {
  cursor: pointer;
  padding: 0.5rem 1rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 1px solid transparent
}

.pagination-container .pagination-inner-container .page-numbers span:hover,
.pagination-container .pagination-inner-container .page-numbers span.current-page {
  border-radius: 2px;
  color: #00bf6f;
  border: 1px solid rgba(0, 0, 0, 0.14)
}

#request-img-container {
  background-color: rgba(0, 0, 0, 0.9)
}

#close-img-display {
  display: block;
  color: #fff;
  margin-left: auto;
  font-size: 1.8rem;
  margin-bottom: 5rem
}

#close-img-display:hover {
  color: red
}

#request-img-container img {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ccc
}

@media (max-width: 767px) {
  .img-inner-container {
    width: 80%;
    margin: 0 auto
  }
}

@media (max-width: 425px) {
  #mail-request-table tbody tr .mail-image {
    width: 10rem;
    padding-right: 1rem
  }
}

@media (max-width: 375px) {
  #mail-request-table thead th,
  #mail-request-table tbody td {
    padding: 1.5rem 1rem
  }
}

@media (max-width: 320px) {
  #mail-request-table thead th,
  #mail-request-table tbody td {
    padding: 1.5rem 0.8rem
  }
  #mail-request-table tbody .mail-status {
    width: 6.7rem
  }
}
<table id="mail-request-table">

  <thead>

    <tr>
      <th>Picture</th>
      <th>Sender</th>
      <th>Date</th>
      <th>Status</th>

    </tr>

  </thead>

  <tbody id="request-listings">

    <tr class="mail-item-row">

      <td class="mail-image">

        <div class="img-container">
          <img src="https://source.unsplash.com/YjWW9-VJlw4/1600x900">
        </div>

      </td>

      <td class="mail-sender">
        Zara
      </td>

      <td class="mail-request-date">
        3/04/20
      </td>

      <td>
        <span class="request-status status-pending">Pending</span>
      </td>

    </tr>

    <tr class="mail-item-row">

      <td class="mail-image">

        <div class="img-container">
          <img src="https://source.unsplash.com/toQNPpuDuwI/1600x900">
        </div>

      </td>

      <td class="mail-sender">
        Zara
      </td>

      <td class="mail-request-date">
        3/04/20
      </td>

      <td>

        <span class="request-status status-rejected">
                                        Rejected
                                    </span>

      </td>

    </tr>

    <tr class="mail-item-row">

      <td class="mail-image">

        <div class="img-container">
          <img src="https://source.unsplash.com/6O7EkAgC-3s/1600x900">
        </div>

      </td>

      <td class="mail-sender">
        Zara
      </td>

      <td class="mail-request-date">
        3/04/20
      </td>

      <td>
        <span class="request-status status-approved">
                                        Approved
                                    </span>
      </td>

    </tr>

    <tr class="mail-item-row">

      <td class="mail-image">

        <div class="img-container">
          <img src="https://source.unsplash.com/YjWW9-VJlw4/1600x900">
        </div>

      </td>

      <td class="mail-sender">
        Zara
      </td>

      <td class="mail-request-date">
        3/04/20
      </td>

      <td>
        <span class="request-status status-pending">
                                        Pending
                                    </span>
      </td>

    </tr>

    <tr class="mail-item-row">

      <td class="mail-image">

        <div class="img-container">
          <img src="https://source.unsplash.com/YjWW9-VJlw4/1600x900">
        </div>

      </td>

      <td class="mail-sender">
        Zara
      </td>

      <td class="mail-request-date">
        3/04/20
      </td>

      <td>
        <span class="request-status status-approved">
                                        Approved
                                    </span>
      </td>

    </tr>

  </tbody>

</table>


<!------------------------------------------------------ Pagination ------------------------------------------------------>

<div class="pagination-container">

  <button title="First page" id="pagination-first-page" class="pagination-btn pagination-outer-btn">
                            <i class="fas fa-chevron-left"></i> &nbsp; First
                        </button>

  <div class="pagination-inner-container">

    <button id="pagination-prev-page" class="pagination-btn pagination-inner-btn">
                                <i class="fas fa-chevron-left"></i>
                            </button>

    <div class="page-numbers">
      <span class="current-page">1</span>

      <span>2</span>

      <span>3</span>
    </div>

    <button id="pagination-next-page" class="pagination-btn pagination-inner-btn">
                                <i class="fas fa-chevron-right"></i>
                            </button>

  </div>

  <button title="Last page" id="pagination-last-page" class="pagination-btn pagination-outer-btn">
                            Last &nbsp; <i class="fas fa-chevron-right"></i>
                        </button>

</div>
...