基于窗口大小的HTML和CSS更改表格布局

我有一个连续两列的表格。它可以在大窗口中正常工作，但是在一个小窗口中，我想将这两列分割成不同的行。这样每一行只有一列。我在这个使用@media screen和（max-width：500px）的JSFiddle（代码如下）上看到了类似的情况。但是这个例子是关于段落的。基于窗口大小的HTML和CSS更改表格布局

#dv-wrapper p { 
    float: left; 
    max-width: 50%; 
} 

@media screen and (max-width: 500px) {  
    #dv-wrapper { 
    text-align: center; 
    } 

    #dv-wrapper p { 
    float: none; 
    text-align: left; 
    display: inline-block; 
    } 
}

我不知道我的目标是否只能通过HTML和CSS来实现。任何人都可以请我帮忙吗？

来源

2015-04-20 H. Wang

请提供您的代码，而不是别人的。 –

检查引导程序。 http://getbootstrap.com/ – Sandeep

我不知道你的代码是什么样的，所以我不能回答，但我想知道它是否需要成为一张表。这听起来像是你可以用两个使用'inline-block'的块来完成，它可以在足够宽的屏幕上并排显示，但是在较窄的屏幕上并排显示。无需媒体查询。 –

jsfiddle

您可能要包装你的段落为单独divs这使得它更容易控制 - 这将基本上给你的段落下面500像素的屏幕100％的全宽 -

来源

2015-04-20 12:45:16

你可以试试这个..

的Html

<div class="table_data"> 
    <dl> 
     <dt>1-1</dt> 
     <dd>1-2</dd> 
    </dl> 
    <dl> 
     <dt>2-1</dt> 
     <dd>2-2</dd> 
    </dl> 
</div>

级的CSS

dt, dd, dl { 
    margin:0; 
    padding:0; 
    border-spacing:0; 
} 
dl { 
    display:table; 
    width:100%; 
} 
dt, dd { 
    width:100%; 
    display:block; 
} 
@media only screen and (min-width:768px) { 
    dt, dd { 
     width:50%; 
     float:left; 
    } 
}

Fiddle Demo

来源

2015-04-20 12:54:15 Aru

基于窗口大小的HTML和CSS更改表格布局

回答

相关问题