基於窗口大小的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更改表格佈局

回答

相關問題