我有一個 div 表。但是 colspan（米色區域）在桌面視圖上不起作用。我認為在移動視圖上作業正常。你有什么想法嗎？我怎樣才能做到這一點？我該如何解決這個 colspan 問題？謝謝大家。
<div class="divTable">
<div class="tHead">
<div class="tr">
<div class="th"> </div>
<div class="th">Header 1</div>
<div class="th">Header 2</div>
</div>
</div>
<div class="tBody">
<div class="tr">
<div class="td">Feature 1</div>
<div class="td check colspan">?</div>
</div>
<div class="tr">
<div class="td">Feature 2</div>
<div class="td remove">x</div>
<div class="td check">?</div>
</div>
<div class="tr">
<div class="td">Feature 3</div>
<div class="td remove">x</div>
<div class="td remove">x</div>
</div>
<div class="tr">
<div class="td">Feature 4</div>
<div class="td remove">x</div>
<div class="td remove">x</div>
</div>
</div>
<div class="tFooter">
<div class="tr">
<div class="td"> </div>
<div class="td">Footer 1</div>
<div class="td">Footer 2</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
.divTable {
display: table;
width: 100%;
}
.tHead {
display: table-header-group;
color: #fff;
background: #009fc8;
font-weight: bold;
font-size: 25px;
}
.tBody {
display: table-row-group;
font-weight: bold;
font-size: 25px;
}
.tFooter {
display: table-footer-group;
color: #fff;
background: #009fc8;
font-weight: bold;
font-size: 25px;
}
.tr {
display: table-row;
font-weight: bold;
font-size: 25px;
}
.td,
.th {
display: table-cell;
padding: 10px;
text-align: center;
font-size: 22px;
word-wrap: break-word;
}
.td {
font-weight: bold;
}
.colspan {
background: beige;
text-align: center;
}
.check {
color: limegreen;
font-size: 30px;
}
.remove {
color: red;
font-size: 30px;
}
.th:first-child,
.td:first-child {
font-weight: bold;
color: black;
}
@media screen and (max-width: 768px) {
.check {
color: limegreen;
font-size: 20px;
}
.remove {
color: red;
font-size: 20px;
}
.tr {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.td,
.th {
display: block;
width: 33.333333333333%;
font-size: 20px;
}
.th:first-child,
.td:first-child {
background: #efefef;
width: 100%;
}
.th:first-child {
display: none;
}
.colspan {
width: 100%;
}
}
https://codepen.io/23ds/pen/wvqmMWY
對于STOF: :))
Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。暫停...
uj5u.com熱心網友回復：
由于目前顯然無法在 div-table-element 上設定 colspan，而使用 table/tr/td 元素會限制回應式樣式的可能性，因此您可以改用 display: grid 來構建布局。下面的代碼應該與您問題中的代碼“行為”相同，但 .colspan 跨越兩列。
* {
box-sizing: border-box;
}
.gridTable {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.th, .footer {
background: #009fc8;
}
.td,
.th {
padding: 10px;
text-align: center;
font-size: 22px;
word-wrap: break-word;
}
.td {
font-weight: bold;
}
.colspan {
grid-column: span 2;
background: beige;
text-align: center;
}
.check {
color: limegreen;
font-size: 30px;
}
.remove {
color: red;
font-size: 30px;
}
@media screen and (max-width: 768px) {
.gridTable {
grid-template-columns: auto auto;
}
.no-mobile {
display: none;
}
.feature {
grid-column: span 2;
}<div class="gridTable">
<div class="th no-mobile"> </div>
<div class="th">Header 1</div>
<div class="th">Header 2</div>
<div class="td feature">Feature 1</div>
<div class="td check colspan">?</div>
<div class="td feature">Feature 2</div>
<div class="td remove">x</div>
<div class="td check">?</div>
<div class="td feature">Feature 3</div>
<div class="td remove">x</div>
<div class="td remove">x</div>
<div class="td footer no-mobile"> </div>
<div class="td footer">Footer 1</div>
<div class="td footer">Footer 2</div>
</div>uj5u.com熱心網友回復：
您可以不使用 div，而是在旁邊使用table 元素<tr>，<td>然后您可以使用該colspan="2"屬性使一個單元格占據兩個位置：
* {
box-sizing: border-box;
}
.divTable {
display: table;
width: 100%;
border-collapse: collapse;
}
.tHead {
display: table-header-group;
color: #fff;
background: #009fc8;
font-weight: bold;
font-size: 25px;
}
.tBody {
display: table-row-group;
font-weight: bold;
font-size: 25px;
}
.tFooter {
display: table-footer-group;
color: #fff;
background: #009fc8;
font-weight: bold;
font-size: 25px;
}
.tr {
display: table-row;
font-weight: bold;
font-size: 25px;
}
.td,
.th {
display: table-cell;
padding: 10px;
text-align: center;
font-size: 22px;
word-wrap: break-word;
}
.td {
font-weight: bold;
}
.colspan {
background: beige;
text-align: center;
}
.check {
color: limegreen;
font-size: 30px;
}
.remove {
color: red;
font-size: 30px;
}
.th:first-child,
.td:first-child {
font-weight: bold;
color: black;
}
@media screen and (max-width: 768px) {
.check {
color: limegreen;
font-size: 20px;
}
.remove {
color: red;
font-size: 20px;
}
.tr {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.td,
.th {
display: block;
width: 33.333333333333%;
font-size: 20px;
}
.th:first-child,
.td:first-child {
background: #efefef;
width: 100%;
}
.th:first-child {
display: none;
}
.colspan {
width: 100%;
}
}<table class="divTable">
<thead class="tHead">
<tr class="tr">
<td class="th"> </td>
<td class="th">Header 1</td>
<td class="th">Header 2</td>
</tr>
</thead>
<tbody class="tBody">
<tr class="tr newtest">
<td class="td">Feature 1</td>
<td colspan="2" class="td check colspan">?</td>
</tr>
<tr class="tr">
<td class="td">Feature 2</td>
<td class="td remove">x</td>
<td class="td check">?</td>
</tr>
<tr class="tr">
<td class="td">Feature 3</td>
<td class="td remove">x</td>
<td class="td remove">x</td>
</tr>
<tr class="tr">
<td class="td">Feature 4</td>
<td class="td remove">x</td>
<td class="td remove">x</td>
</tr>
</tbody>
<tfoot class="tFooter">
<tr class="tr">
<td class="td"> </td>
<td class="td">Footer 1</td>
<td class="td">Footer 2</td>
</tr>
</tfoot>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351437.html
標籤：html css html-table