Просто интересно, как сделать так, чтобы каждая из моих 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>