我需要什么 CSS 和 HTML 才能将表格从 1 行 4 列数据切换为 2 行 2 列、屏幕宽度为 550 像素且没有重复内容？

Question

使用 CSS 和 HTML 我想在没有重复内容的情况下实现这种效果？ 这是示例页面的链接，该页面使用我在下一节中粘贴的代码： http://www.omniturn.com/bin/RepairParts/rp_sample-code.htm

我没有受过很好的 CSS 教育，所以我调查了各种论坛和博客，但没有成功。我没有研究 Bootstrap。通过闲逛，我偶然发现了一种可行的技术，但它需要复制内容。我想避免这个要求。这是我想出的代码： CSS：

.box1{display: table-cell;  
    border:1px solid black;
    width: 35%;
    padding: .5em;
    margin-bottom: 0px;
    vertical-align:middle;
    text-align: center; 
    }
.box2{display: table-cell;
    border:1px solid black;
    width: 40%;
    padding: .5em;
    margin-bottom: 0px;
    vertical-align:middle;
    text-align: center;
    }
.box3{display: table-cell;
    border:1px solid black;
    width: 15%;
    padding: .5em;
    vertical-align:middle;
    text-align: center; 
    }
.box4{display: table-cell;
    border:1px solid black;
    width: 10%;
    padding: .5em;
    vertical-align:middle;
    text-align: center;
    }
.box3a{display: table-cell;
    border:1px solid black;
    width: 15%;
    padding: .5em;`your text`
    vertical-align:middle;
    text-align: center;
    line-height: .5;    
    }
.box4a{display: table-cell;
    border:1px solid black;
    width: 10%;
    padding: .5em;
    vertical-align:middle;
    text-align: center; 
    line-height: .5;        
    }
.row-big{display: table-row; width: 900px;}
.row-small{display: none;font-size: .8em;}

@media only screen and (max-width: 550px) {
h1{font-size: .8em;}
.box1{width: 45%;}
.box2{width: 45%;}
.box3{width: 45%;border-bottom: 3px solid black;}
.box4{width: 45%;border-bottom: 3px solid black;}
.box3a{width: 45%;border-bottom: 3px solid black;}
.box4a{width: 45%;border-bottom: 3px solid black;}
.row-big{display: none;}
.row-small{display: table-row;}
}
@media only screen and (max-width: 680px) {
    .row-big{font-size: .8em;}
    }

HTML：

<div style="display:table; width:100% ">
<div class="row-big">
<div class="box1">Component</div>  
<div class="box2">Description</div>
<div class="box3">Part Number</div>
<div class="box4">Price</div>
</div>
<div class="row-small">
<div class="box1">Component</div>  
<div class="box2">Description</div>
</div>
<div class="row-small">
<div class="box3">Part Number</div>
<div class="box4">Price</div>
</div>

<div class="row-big">
<div class="box1"><img src="some.jpg" alt="Image of Palm Box" title=""></div>  
<div class="box2">Palm Box (Operators Station)</div>
<div class="box3">998-00-000 </div>
<div class="box4">$395 </div>
</div>
<div class="row-small">
<div class="box1"><img src="some.jpg" alt="Image of Palm Box" title=""></div>  
<div class="box2">Palm Box (Operators Station)</div>
</div>
<div class="row-small">
<div class="box3">998-00-000</div>
<div class="box4">$395 </div>
</div>
<div class="row-big">
<div class="box1"><img src="some.jpg" alt="Image of Palm Box Collet Close Assy" title=""></div>  
<div class="box2">Palm Box Collet Close Assy</div>
<div class="box3">998-12-101 </div>
<div class="box4">$35 </div>
</div>
<div class="row-small">
<div class="box1"><img src="some.jpg" alt="Image of Palm Box Collet Close Assy" title=""></div>  
<div class="box2">Palm Box Collet Close Assy</div>
</div>
<div class="row-small">
<div class="box3">998-12-101</div>
<div class="box4">$35 </div>
</div>
</div>

预先感谢您的帮助！

Answer 1

要在不重复内容的情况下达到所需的效果，您可以重构 HTML 和 CSS。以下是修改代码的方法

.table-container {
    display: table;
    width: 100%;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
    border: 1px solid black;
    padding: .5em;
    vertical-align: middle;
    text-align: center;
}

@media only screen and (max-width: 550px) {
    .table-cell {
        width: 50%;
    }
}

<div class="table-container">
    <div class="table-row">
        <div class="table-cell">Component</div>
        <div class="table-cell">Description</div>
        <div class="table-cell">Part Number</div>
        <div class="table-cell">Price</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Palm Box (Operators Station)</div>
        <div class="table-cell">Palm Box (Operators Station)</div>
        <div class="table-cell">998-00-000</div>
        <div class="table-cell">$395</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Palm Box Collet Close Assy</div>
        <div class="table-cell">Palm Box Collet Close Assy</div>
        <div class="table-cell">998-12-101</div>
        <div class="table-cell">$395</div>
    </div>
</div>