html - 在手机/平板电脑屏幕上将表格变成块元素并将列转换为行 [响应式设计]
问题描述
伙计们,我需要帮助将表格的列转换为移动/平板电脑屏幕上的相应行,以获得更好的用户体验。我附上了我卡住的代码和我希望在这一点上实现的图片。我会很感激你的建议。 我希望表格列转换为相应的行,如图所示
.product-overview-table {
margin: 30px 0;
width:100%;
}
.product-overview-table thead {
background: #F9BA32;
color: #fff;
}
.product-overview-table,
.product-overview-table td,
.product-overview-table th {
border: none;
box-sizing: border-box;
padding: 10px;
}
.product-overview-table thead th {
font-weight: 300;
font-size: 17px;
padding: 10px;
margin: 0;
}
.product-overview-table tr {
display: flex !important;
flex-wrap: wrap !important;
align-items: center;
transition: 0.3s;
}
.product-overview-table tbody tr:hover {
transform: scale(1.02);
transition: 0.3s;
box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
}
.product-overview-table tbody tr {
border: 2px solid #e1e1e1;
margin-bottom: 5px;
}
.product-overview-table tr td:first-child,
.product-overview-table tr th:first-child {
width: 20%;
}
.product-overview-table tr td:nth-child(2),
.product-overview-table tr th:nth-child(2) {
width: 20%;
}
.product-overview-table tr td:nth-child(3),
.product-overview-table tr th:nth-child(3) {
width: 10%;
}
.product-overview-table tr td:nth-child(4),
.product-overview-table tr th:nth-child(4) {
width: 10%;
}
.product-overview-table tr td:nth-child(5),
.product-overview-table tr th:nth-child(5) {
width: 10%;
}
.product-overview-table tr td:nth-child(6),
.product-overview-table tr th:nth-child(6) {
width: 10%;
}
.product-overview-table tr td:last-child,
.product-overview-table tr th:last-child {
width: 20%;
}
.product-overview-table .product-image {
position: relative;
}
.product-overview-table .p_tag {
position: absolute;
left: -10px;
top: 0;
background: #5898ff;
padding: 5px 5px;
color: #fff;
font-size: 12px;
text-transform: uppercase;
}
.product-overview-table .p_tag::after {
content: ' ';
display: block;
position: absolute;
left: -10px;
bottom: -7px;
border-color: rgba(0, 0, 0, 0) #133091 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-style: inset solid inset inset;
border-width: 0 10px 7px;
}
.product-overview-table .p-img {
width: 90%;
max-height: 140px;
margin: 0 auto;
display: block;
height: auto;
object-fit: contain;
}
.product-overview-table .product-title .p_title {
font-weight: 600;
font-size: 17px;
line-height: 1.2;
text-decoration: none;
color: #4b77b7;
text-align: center;
}
.product-overview-table .product-btn a {
background: #D32F2F;
text-transform: capitalize;
padding: 10px;
border-radius: 5px;
color: #fff;
font-size: 15px;
display: block;
text-align: center;
transition: 0.3s;
}
.product-overview-table .product-btn a:hover {
background: #000;
transition: 0.3s;
}
.product-overview-table .product-feature {
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
text-align: center;
}
@media only screen and (max-width: 768px) {
.product-overview-table .p_tag {
position: absolute;
left: -20px;
top: -10px;
}
.product-overview-table tbody tr {
padding: 10px;
}
.product-overview-table tr td:first-child {
width: 100%;
}
.product-overview-table tr td:nth-child(2) {
width: 100%;
}
.product-overview-table tr td:last-child,
.product-overview-table tr th:last-child {
width: 100%;
}
.product-overview-table .product-btn a {
margin-top: 20px;
}
.product-overview-table tr th:nth-child(2) {
width: 100%;
}
.product-overview-table tr th:first-child,
.product-overview-table tr th:nth-child(2),
.product-overview-table tr th:nth-child(3),
.product-overview-table tr th:nth-child(4),
.product-overview-table tr th:nth-child(5),
.product-overview-table tr th:nth-child(6),
.product-overview-table tr th:last-child {
display: none;
}
td:not(:first-child):before {
color: #91ced4;
content: "";
display: block;
left: 0;
position: relative;
width: 100%;
tax-align:left;
float: left;
}
.product-overview-table td:nth-child(3),
.product-overview-table td:nth-child(4),
.product-overview-table td:nth-child(5),
.product-overview-table td:nth-child(6) {
tax-align:left;
float: left;
}
td:nth-child(3):before {
content: "Material:";
}
td:nth-child(4):before {
content: "Wheel:";
}
td:nth-child(5):before {
content: "Capacity:";
}
td:nth-child(6):before {
content: "Colors:";
}
}
/* End Affiliate Product Box */
<table class="product-overview-table">
<thead>
<tr>
<th>Preview</th>
<th>Product</th>
<th>Material</th>
<th>Wheel</th>
<th>Capacity</th>
<th>Colors</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product-image">
<div class="p_tag">
Top Pick
</div>
<a href="#" rel="nofollow" target="_blank">
<img src="https://redkosports.com/wp-content/uploads/2021/09/Redko-Sports-About-Slider-Background.png" class="p-img">
</a>
</td>
<td class="product-title">
<a href="#" rel="nofollow" target="_blank">
<div class="p_title">
SkateXS Personalized Street Skateboard
</div>
</a>
</td>
<td class="product-feature">
Bamboo
</td>
<td class="product-feature">
Polyurethane </td>
<td class="product-feature">
250 lbs
</td>
<td class="product-feature">
24
</td>
<td class="product-btn">
<a href="#" rel="nofollow" target="_blank">Check Price
</a>
</td>
</tr>
</tbody>
<style>
</style>
</table>
强文本
解决方案
这是我对你的提议..我希望你会满意:-)
.product-overview-table {
margin: 30px 0;
width:100%;
}
.product-overview-table thead {
background: #F9BA32;
color: #fff;
}
.product-overview-table,
.product-overview-table td,
.product-overview-table th {
border: none;
box-sizing: border-box;
padding: 10px;
}
.product-overview-table thead th {
font-weight: 300;
font-size: 17px;
padding: 10px;
margin: 0;
}
.product-overview-table tr {
display: flex !important;
flex-wrap: wrap !important;
align-items: center;
transition: 0.3s;
}
.product-overview-table tbody tr:hover {
transform: scale(1.02);
transition: 0.3s;
box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
}
.product-overview-table tbody tr {
border: 2px solid #e1e1e1;
margin-bottom: 5px;
}
.product-overview-table tr td:first-child,
.product-overview-table tr th:first-child {
width: 20%;
}
.product-overview-table tr td:nth-child(2),
.product-overview-table tr th:nth-child(2) {
width: 20%;
}
.product-overview-table tr td:nth-child(3),
.product-overview-table tr th:nth-child(3) {
width: 10%;
}
.product-overview-table tr td:nth-child(4),
.product-overview-table tr th:nth-child(4) {
width: 10%;
}
.product-overview-table tr td:nth-child(5),
.product-overview-table tr th:nth-child(5) {
width: 10%;
}
.product-overview-table tr td:nth-child(6),
.product-overview-table tr th:nth-child(6) {
width: 10%;
}
.product-overview-table tr td:last-child,
.product-overview-table tr th:last-child {
width: 20%;
}
.product-overview-table .product-image {
position: relative;
}
.product-overview-table .p_tag {
position: absolute;
left: -10px;
top: 0;
background: #5898ff;
padding: 5px 5px;
color: #fff;
font-size: 12px;
text-transform: uppercase;
}
.product-overview-table .p_tag::after {
content: ' ';
display: block;
position: absolute;
left: -10px;
bottom: -7px;
border-color: rgba(0, 0, 0, 0) #133091 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-style: inset solid inset inset;
border-width: 0 10px 7px;
}
.product-overview-table .p-img {
width: 90%;
max-height: 140px;
margin: 0 auto;
display: block;
height: auto;
object-fit: contain;
}
.product-overview-table .product-title .p_title {
font-weight: 600;
font-size: 17px;
line-height: 1.2;
text-decoration: none;
color: #4b77b7;
text-align: center;
}
.product-overview-table .product-btn a {
background: #D32F2F;
text-transform: capitalize;
padding: 10px;
border-radius: 5px;
color: #fff;
font-size: 15px;
display: block;
text-align: center;
transition: 0.3s;
}
.product-overview-table .product-btn a:hover {
background: #000;
transition: 0.3s;
}
.product-overview-table .product-feature {
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
text-align: center;
}
@media only screen and (max-width: 768px) {
.product-overview-table tr {
flex-direction:column;
align-items:ce;
}
.product-overview-table tr td:nth-child(4) {
width: 25%;
}
.product-overview-table tr td:nth-child(3) {
width: 25%;
}
.product-overview-table tr td:nth-child(5) {
width: 25%;
}
.product-overview-table tr td:nth-child(6) {
width: 25%;
}
.product-overview-table .p_tag {
position: absolute;
left: -20px;
top: -10px;
}
.product-overview-table tbody tr {
padding: 10px;
}
.product-overview-table tr td:first-child {
width: 100%;
}
.product-overview-table tr td:nth-child(2) {
width: 100%;
}
.product-overview-table tr td:last-child,
.product-overview-table tr th:last-child {
width: 100%;
}
.product-overview-table .product-btn a {
margin-top: 20px;
}
.product-overview-table tr th:nth-child(2) {
width: 100%;
}
.product-overview-table tr th:first-child,
.product-overview-table tr th:nth-child(2),
.product-overview-table tr th:nth-child(3),
.product-overview-table tr th:nth-child(4),
.product-overview-table tr th:nth-child(5),
.product-overview-table tr th:nth-child(6),
.product-overview-table tr th:last-child {
display: none;
}
td:not(:first-child):before {
color: #91ced4;
content: "";
display: block;
left: 0;
position: relative;
width: 100%;
tax-align:left;
float: left;
}
.product-overview-table td:nth-child(3),
.product-overview-table td:nth-child(4),
.product-overview-table td:nth-child(5),
.product-overview-table td:nth-child(6) {
tax-align:left;
float: left;
}
td:nth-child(3):before {
content: "Material:";
}
td:nth-child(4):before {
content: "Wheel:";
}
td:nth-child(5):before {
content: "Capacity:";
}
td:nth-child(6):before {
content: "Colors:";
}
}
<table class="product-overview-table">
<thead>
<tr>
<th>Preview</th>
<th>Product</th>
<th>Material</th>
<th>Wheel</th>
<th>Capacity</th>
<th>Colors</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product-image">
<div class="p_tag">
Top Pick
</div>
<a href="#" rel="nofollow" target="_blank">
<img src="https://redkosports.com/wp-content/uploads/2021/09/Redko-Sports-About-Slider-Background.png" class="p-img">
</a>
</td>
<td class="product-title">
<a href="#" rel="nofollow" target="_blank">
<div class="p_title">
SkateXS Personalized Street Skateboard
</div>
</a>
</td>
<td class="product-feature">
Bamboo
</td>
<td class="product-feature">
Polyurethane </td>
<td class="product-feature">
250 lbs
</td>
<td class="product-feature">
24
</td>
<td class="product-btn">
<a href="#" rel="nofollow" target="_blank">Check Price
</a>
</td>
</tr>
</tbody>
<style>
</style>
</table>
推荐阅读
- javascript - 我想不明白
意义。谷歌很难 - java - 一个简单的 Spring 没有 favicon.ico - Maven Web 应用程序
- ios - 每当我在 iOS 上键入内容时,ListViews 中的 Xamarin 表单编辑器都会失去焦点
- azure - Azure:撤销用户的访问令牌,使他们无法从 Azure 中的移动后端请求数据
- javascript - 为什么我无法捕捉到返回的响应错误?
- c++ - 错误:无法转换 'std::__cxx11::basic_string
::迭代器' - c++ - 如何建立运算符优先级?
- sql - 在 MS Access 中填充字母数字值的条件更新查询
- javascript - 如何使用 Javascript 获取结果
- python - 在python中使用列表对嵌套字典进行排序