HTML表格单元格如何设置宽度

Question

如何通过 display: table-cell 强制元素的宽度？

<div id="wraper">
  <div id="left">
    <p>Left</p>
  </div>
  <div id="right">
    <p>Right and Hide</p>
  </div>
</div>

我的 CSS 没有做任何事情，#left 和 #righ 元素的宽度没有受到影响。

#wraper {
  display: table-wrap;
}
#left {
  border: 1px solid red;
  display: table-cell;
  width: 30%;
}
#right {
  border: 1px solid blue;
  display: table-cell;
  width 70%;
}

Answer 1

它对我来说很好用JS fiddle :https://jsfiddle.net/qq0t46pt/1/

HTML:

<div id="wraper">
  <div id="left">
    <p>Left</p>
  </div>
  <div id="right">
    <p>Right and Hide</p>
  </div>
</div>

CSS:

#wraper {
  display: table-wrap;
}
#left {
  border: 1px solid red;
  display: table-cell;
  width: 30%;
}
#right {
  border: 1px solid blue;
  display: table-cell;
  width 70%;
}