英文:
How to move rowspan column to top of the row at mobile screens?
问题
我有以下的表格。
现在在移动屏幕上,我想将基本列移到顶部,以使所有内容适应单个屏幕。因为这样可以节省左侧的空间,如下所示。
如何做到这一点?
当前的代码如下:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
td.spec {
font-weight: bold;
}
td.value {
font-weight: normal;
}
td.spec {
border-right: 1px solid #ddd;
padding-right: 10px;
}
td.value {
border-left: 1px solid #ddd;
padding-left: 10px;
}
.i-text {
font-size: 12px !important;
color: #6a6565 !important;
}
.table-fix-width {
width: 250px;
border-left: 1px solid #ddd;
}
th.group-heading {
text-align: center !important;
background-color: #5a5a5a !important;
color: white;
border-radius: 8px;
}
<!-- language: lang-html -->
<section class="table-responsive">
<table id="myTable" class="table table-sm">
<thead>
<tr>
<th></th>
<th></th>
<th>
<div class="ui-widget text-left">
<i class="i-text">输入型号名称或部分名称</i><br />
<input type="text" id="search" />
</div>
</th>
<th>
<div class="ui-widget">
<i class="i-text">输入型号名称或部分名称</i><br />
<input type="text" id="search2" />
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="header" rowspan="4">BASIC</th>
<td class="spec">Capacity</td>
<td data-label="" class="value">20GB</td>
<td data-label="" class="value">20GB</td>
</tr>
<tr>
<td class="spec">Name</td>
<td data-label="" class="value">Product 1</td>
<td data-label="" class="value">Product 2</td>
</tr>
<tr>
<td class="spec">Category</td>
<td data-label="" class="value">TV</td>
<td data-label="" class="value">TV2</td>
</tr>
</tbody>
</table>
</section>
<!-- end snippet -->
如何做到这一点?
英文:
I have the following table.
Now at mobile screens I want to move basic column to top to fit everything to single screen. Becuase it saves left side space.like below
How to do this?
Current Code is below
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
td.spec {
font-weight: bold;
}
td.value {
font-weight: normal;
}
td.spec {
border-right: 1px solid #ddd;
padding-right: 10px;
}
td.value {
border-left: 1px solid #ddd;
padding-left: 10px;
}
.i-text {
font-size: 12px !important;
color: #6a6565 !important;
}
.table-fix-width {
width: 250px;
border-left: 1px solid #ddd;
}
th.group-heading {
text-align: center !important;
background-color: #5a5a5a !important;
color: white;
border-radius: 8px;
}
<!-- language: lang-html -->
<section class="table-responsive">
<table id="myTable" class="table table-sm">
<thead>
<tr>
<th></th>
<th></th>
<th>
<div class="ui-widget text-left">
<i class="i-text">Enter model name or part of it</i><br />
<input type="text" id="search" />
</div>
</th>
<th>
<div class="ui-widget">
<i class="i-text">Enter model name or part of it</i><br />
<input type="text" id="search2" />
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="header" rowspan="4">BASIC</th>
<td class="spec">Capacity</td>
<td data-label="" class="value">20GB</td>
<td data-label="" class="value">20GB</td>
</tr>
<tr>
<td class="spec">Name</td>
<td data-label="" class="value">Product 1</td>
<td data-label="" class="value">Product 2</td>
</tr>
<tr>
<td class="spec">Category</td>
<td data-label="" class="value">TV</td>
<td data-label="" class="value">TV2</td>
</tr>
</tbody>
</table>
</section>
<!-- end snippet -->
How to do this?
答案1
得分: 1
所以我进行了快速搜索,结果显示我们无法通过CSS来操纵rowspan
和colspan
属性。即使下面的解决方案适用于您的用例,我建议您重新考虑这种布局方式。使用表格进行布局是一种古老的做法,而且非常麻烦。也许您可以使用flexbox或grid之类的东西来实现您的目标。干杯!
HTML更改:
<section class="table-responsive">
<table id="myTable" class="table table-sm">
<thead>
<tr>
<th class='extra--col'></th>
<th></th>
<th>
<div class="ui-widget text-left">
<i class="i-text">输入型号名称或部分内容</i><br />
<input type="text" id="search" />
</div>
</th>
<th>
<div class="ui-widget">
<i class="i-text">输入型号名称或部分内容</i><br />
<input type="text" id="search2" />
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="header header--desktop" rowspan='4'>基本</th>
<th class="header header--mobile" colspan='4'>基本</th>
</tr>
<tr>
<td class="spec">容量</td>
<td data-label="" class="value">20GB</td>
<td data-label="" class="value">20GB</td>
</tr>
<tr>
<td class="spec">名称</td>
<td data-label="" class="value">产品1</td>
<td data-label="" class="value">产品2</td>
</tr>
<tr>
<td class="spec">类别</td>
<td data-label="" class="value">电视</td>
<td data-label="" class="value">电视2</td>
</tr>
</tbody>
</table>
</section>
CSS:
/* 新样式 */
.header--mobile{
display: none;
}
@media only screen and (max-width: 600px) {
.header--mobile{
display: table-cell;
}
.header--desktop,
.extra--col{
display: none;
}
}
更新:我已根据更改进行了编辑。
英文:
so I did a quick search and it turns out that we cannot manipulate rowspan
and colspan
attributes through css.
Even though the solution below works for your use-case, I'd recommend that you perhaps rethink this layout approach. Using tables for layout purposes is an ancient practice and very troublesome. Maybe you can achieve your goals using something like flexbox or grid. Cheers!
html change:
<section class="table-responsive">
<table id="myTable" class="table table-sm">
<thead>
<tr>
<th class='extra--col'></th>
<th></th>
<th>
<div class="ui-widget text-left">
<i class="i-text">Enter model name or part of it</i><br />
<input type="text" id="search" />
</div>
</th>
<th>
<div class="ui-widget">
<i class="i-text">Enter model name or part of it</i><br />
<input type="text" id="search2" />
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="header header--desktop" rowspan='4'>BASIC</th>
<th class="header header--mobile" colspan='4'>BASIC</th>
</tr>
<tr>
<!-- <th class="header" rowspan="4">BASIC</th> -->
<td class="spec">Capacity</td>
<td data-label="" class="value">20GB</td>
<td data-label="" class="value">20GB</td>
</tr>
<tr>
<td class="spec">Name</td>
<td data-label="" class="value">Product 1</td>
<td data-label="" class="value">Product 2</td>
</tr>
<tr>
<td class="spec">Category</td>
<td data-label="" class="value">TV</td>
<td data-label="" class="value">TV2</td>
</tr>
</tbody>
</table>
</section>
css :
/* new styles */
.header--mobile{
display: none;
}
@media only screen and (max-width: 600px) {
.header--mobile{
display: table-cell;
}
.header--desktop,
.extra--col{
display: none;
}
}
Update: I have made the edits based on the change.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论