HTML和CSS根据窗口大小更改表布局

Question

I have a table with two columns in a row. It works fine on big window, but on a small window I would like to 'split' these two columns into different rows. So that each row has only one column. I do see a similar situation on this JSFiddle (code below) which makes use of @media screen and (max-width: 500px). But the example is about paragraphs.

#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;
  }
}

I don't know if my goal could be achieved with only HTML and CSS. Can anyone give me a hand please?

Answer 1

jsfiddle

You may want to wrap your paragraphs into separate divs which makes it easier to control - This will basically give your paragraphs a full width of 100% on screens below 500px -

Answer 2

you can try this..

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