如何将跨行列移到移动屏幕的行顶部?

huangapple go评论93阅读模式
英文:

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 -->

&lt;section class=&quot;table-responsive&quot;&gt;
&lt;table id=&quot;myTable&quot; class=&quot;table table-sm&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;
&lt;div class=&quot;ui-widget text-left&quot;&gt;
&lt;i class=&quot;i-text&quot;&gt;Enter model name or part of it&lt;/i&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; id=&quot;search&quot; /&gt;
&lt;/div&gt;
&lt;/th&gt;
&lt;th&gt;
&lt;div class=&quot;ui-widget&quot;&gt;
&lt;i class=&quot;i-text&quot;&gt;Enter model name or part of it&lt;/i&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; id=&quot;search2&quot; /&gt;
&lt;/div&gt;
&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th class=&quot;header&quot; rowspan=&quot;4&quot;&gt;BASIC&lt;/th&gt;
&lt;td class=&quot;spec&quot;&gt;Capacity&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;20GB&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;20GB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;spec&quot;&gt;Name&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;Product 1&lt;/td&gt;

<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来操纵rowspancolspan属性。即使下面的解决方案适用于您的用例,我建议您重新考虑这种布局方式。使用表格进行布局是一种古老的做法,而且非常麻烦。也许您可以使用flexbox或grid之类的东西来实现您的目标。干杯!

HTML更改:

&lt;section class=&quot;table-responsive&quot;&gt;
&lt;table id=&quot;myTable&quot; class=&quot;table table-sm&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th class=&#39;extra--col&#39;&gt;&lt;/th&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;
&lt;div class=&quot;ui-widget text-left&quot;&gt;
&lt;i class=&quot;i-text&quot;&gt;输入型号名称或部分内容&lt;/i&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; id=&quot;search&quot; /&gt;
&lt;/div&gt;
&lt;/th&gt;
&lt;th&gt;
&lt;div class=&quot;ui-widget&quot;&gt;
&lt;i class=&quot;i-text&quot;&gt;输入型号名称或部分内容&lt;/i&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; id=&quot;search2&quot; /&gt;
&lt;/div&gt;
&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th class=&quot;header header--desktop&quot; rowspan=&#39;4&#39;&gt;基本&lt;/th&gt;
&lt;th class=&quot;header header--mobile&quot; colspan=&#39;4&#39;&gt;基本&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;spec&quot;&gt;容量&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;20GB&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;20GB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;spec&quot;&gt;名称&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;产品1&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;产品2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;spec&quot;&gt;类别&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;电视&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;电视2&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/section&gt;

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:

&lt;section class=&quot;table-responsive&quot;&gt;
&lt;table id=&quot;myTable&quot; class=&quot;table table-sm&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th class=&#39;extra--col&#39;&gt;&lt;/th&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;
&lt;div class=&quot;ui-widget text-left&quot;&gt;
&lt;i class=&quot;i-text&quot;&gt;Enter model name or part of it&lt;/i&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; id=&quot;search&quot; /&gt;
&lt;/div&gt;
&lt;/th&gt;
&lt;th&gt;
&lt;div class=&quot;ui-widget&quot;&gt;
&lt;i class=&quot;i-text&quot;&gt;Enter model name or part of it&lt;/i&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; id=&quot;search2&quot; /&gt;
&lt;/div&gt;
&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th class=&quot;header header--desktop&quot; rowspan=&#39;4&#39;&gt;BASIC&lt;/th&gt;
&lt;th class=&quot;header header--mobile&quot; colspan=&#39;4&#39;&gt;BASIC&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;!--                 &lt;th class=&quot;header&quot; rowspan=&quot;4&quot;&gt;BASIC&lt;/th&gt; --&gt;
&lt;td class=&quot;spec&quot;&gt;Capacity&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;20GB&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;20GB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;spec&quot;&gt;Name&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;Product 1&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;Product 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;spec&quot;&gt;Category&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;TV&lt;/td&gt;
&lt;td data-label=&quot;&quot; class=&quot;value&quot;&gt;TV2&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/section&gt;

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.

huangapple
  • 本文由 发表于 2023年6月16日 12:47:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76487021.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定