Question

当窗口大小大于600px时，我试图使一个表响应4列，而对于移动视图，则要响应2列。我在下表中描述。我使用引导程序。我想在移动视图中显示为th，val。

-----------------------------
| th1  | th2  | th3  | th4  |
-----------------------------
| val1 | val2 | val3 | val4 |
-----------------------------
| th5  | th6  | th7  | th8  |
-----------------------------
| val5 | val6 | val7 | val8 |`

in mobile view我想这样显示：

--------------
| th1 | val1 |
---------------
| th2 | val2 | 
--------------
| th3 | val3 |
--------------
| th4 | val4 |
--------------
| th5 | val5 |
--------------
| th6 | val6 |
--------------
| th7 | val7 |
--------------
| th8 | val8 |`

我有这个：

<table class="table table-bordered table-striped">
    <tbody class="center">
        <tr>
            <th>th1</th>
            <th>th2</th>
            <th>th3</th>
            <th>th4</th>
        </tr>
        <tr>
            <td>val1</td>
            <td>val2</td>
            <td>val3</td>
            <td>val4</td>
        </tr>
        <tr>
            <th>th5</th>
            <th>th6</th>
            <th>th7</th>
            <th>th8</th>
        </tr>
        <tr>
            <td>val5</td>
            <td>val6</td>
            <td>val7</td>
            <td>val8</td>
        </tr>
    </tbody>
</table>

Answer 1

尝试第data个

<table class="table table-bordered table-striped" id="customDataTable">
<thead>
<tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
    <th>th4</th>
</tr>
</thead>
<tbody class="center">
<tr>
    <td data-th="th1">val1</td>
    <td data-th="th2">val2</td>
    <td data-th="th3">val3</td>
    <td data-th="th4">val4</td>
</tr>
<tr>
    <td data-th="th1">th5</td>
    <td data-th="th2">th6</td>
    <td data-th="th3">th7</td>
    <td data-th="th4">th8</td>
</tr>

</tbody>

@media screen and (max-width: 600px) {
        table#customDataTable caption {
            background-image: none;
        }
    
        table#customDataTable thead {
            display: none;
        }
    
        table#customDataTable tbody td {
            display: block;
            padding: .6rem;
        }
    
        table#customDataTable tbody tr td:first-child {
            background: #666;
            color: #fff;
        }
    
            table#customDataTable tbody tr td:first-child a {
                color: #fff;
            }
    
            table#customDataTable tbody tr td:first-child:before {
                color: rgb(225,181,71);
            }
    
        table#customDataTable tbody td:before {
            content: attr(data-th);
            font-weight: bold;
            display: inline-block;
            width: 10rem;
        }
    
        table#customDataTable tr th:last-child, table#customDataTable tr td:last-child {
            max-width: 100% !important;
            min-width: 100px !important;
            width: 100% !important;
        }
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-striped" id="customDataTable">
            <thead>
            <tr>
                <th>th1</th>
                <th>th2</th>
                <th>th3</th>
                <th>th4</th>
            </tr>
            </thead>
            <tbody class="center">
            <tr>
                <td data-th="th1">val1</td>
                <td data-th="th2">val2</td>
                <td data-th="th3">val3</td>
                <td data-th="th4">val4</td>
            </tr>
            <tr>
                <td data-th="th1">th5</td>
                <td data-th="th2">th6</td>
                <td data-th="th3">th7</td>
                <td data-th="th4">th8</td>
            </tr>
            
            </tbody>
        </table>

https://jsfiddle.net/lalji1051/oh0va43t/8/

引导程序响应中不同的表列和行

1 个答案: