css

时间:2015-12-04 21:25:58

标签: html css html5

我想将列转换为行,并将其与1行中的其他行一起显示。我不知道是否可能,但如果是的话,请帮忙!我想只使用CSS将表列转换为表行。表很好,它工作正常,但我想让它响应,一切都在垂直线上,我只是得到这个结果,一个Γ形状。

这就是我得到的:

@media screen and (max-width:650px)

{

    table, thead, tbody, tr, th, td{

          display:block;
    }
    thead tr { 
          display:none;
    }
    tbody tr{
          display:table-row;
          width:auto;
    }
}

/这就是我用HTML格式 /

<table width="1400px">
                        <thead>
                        <tr>
                            <th>a1</th>
                            <th>a2</th>
                            <th>a3</th>
                            <th>a4</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>b1</td>
                            <td rowspan="13">b2</td>
                            <td rowspan="13">b3</td>
                            <td rowspan="13">b4</td>
                        </tr>
                        <tr>
                            <td>c1</td>
                        </tr>
                        <tr>
                            <td>d1</td>
                        </tr>
                        <tr>
                            <td>e1</td>
                        </tr>
                        <tr> 
                           <td>f1</td> 
                        </tr>
                        <tr>  
                            <td>g1</td>  
                        </tr>
                        <tr> 
                            <td>h1</td>
                        </tr>
                        <tr> 
                           <td>i1</td>
                        </tr>
                        <tr>
                            <td>j1</td>
                        </tr>
                        <tr>
                            <td>k1</td>
                        </tr>
                        <tr>
                            <td>l1</td>
                        </tr>
                        <tr>
                            <td>m1</td>
                        </tr>
                        <tr>
                            <td>n1</td>
                        </tr>
                        </tbody>
                        </table>

0 个答案:

没有答案