Как сделать так, чтобы мои таблицы параметров на мобильном устройстве имели ширину 100%? - PullRequest
0 голосов
/ 26 сентября 2018

Просто интересно, как сделать так, чтобы каждая из моих 3 таблиц вариантов членства на мобильном устройстве имела ширину 100%?

Поиск в Интернете, однако упомянутые там методы не сработали для меня!

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial';
}

.membershipheader {
  background-color: #29303f;
  color: #b0fe76;
  font-size: 20px;
  padding: 1.5%;
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  letter-spacing: 0.6px;
}

.homepagemembershipoptionstable {
  margin-top: 3%;
  border-spacing: 25px 0px;
  margin-bottom: 3%;
}

.homepagemembershipoptionstable tr th {
  width: 2000px;
  font-size: 35px;
  font-family: "Lato";
  letter-spacing: 0.4px;
  font-family: 'Fjalla One', sans-serif;
  transform: scale(1, 1.1);
}

.homepagemembershipoptionstable tr td {
  border: 2px #2f394d;
}

.membershipoptionstablecontainer {
  margin: 0px -20px;
  overflow: hidden;
  width: 100%;
}

.membershippricinghomepage {
  background-color: white;
  color: #555;
  font-size: 16px;
  font-weight: 600;
  padding: 1.6%;
  text-align: center;
}

.membershiprewardshomepage {
  background-color: #f2f2f2;
  color: #555;
  font-size: 16px;
  font-weight: 600;
  padding: 1.6%;
  text-align: center;
}

.membershippricetext {
  font-size: 33px;
  color: #2f394d
}

.membershipwrapper {
  background-color: #ffffff;
}
<div class="membershipwrapper">
  <div class="membershipoptionstablecontainer">

    <table class="homepagemembershipoptionstable">
      <tr>
        <th class="membershipheader">Silver</th>
        <th class="membershipheader">Gold</th>
        <th class="membershipheader">Platinum</th>
      </tr>
      <tr>
        <td class="membershippricinghomepage">
          <p class="membershippricetext">£10</p> / month</td>
        <td class="membershippricinghomepage">
          <p class="membershippricetext">£15</p> / month</td>
        <td class="membershippricinghomepage">
          <p class="membershippricetext">£20</p> / month</td>
      </tr>
      <tr>
        <td class="membershiprewardshomepage">
          2 credits, monthly</td>
        <td class="membershiprewardshomepage">3 credits, monthly</td>
        <td class="membershiprewardshomepage">5 credits, monthly</td>
      </tr>
    </table>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...