相关疑难解决方法(0)

桌面上的Flexbox在Firefox中不起作用

使用flexbox控制表的布局在webkit浏览器中工作,但在Firefox中,<td>s只能呈现与其自己的内容一样宽.

演示:http://codepen.io/afraser/pen/wMgbzr? edit = 010

* {
  box-sizing: border-box;
}
table {
  border: 1px solid #ddd;
  width: 100%;
}
tbody {
  background: #fff;
}
tr {
  display: flex;
}
td:first-child {
  flex: 1 1 80%;
  background: mistyrose;
}
td:nth-child(2) {
  flex: 0 0 10%;
  background: Aquamarine;
}
td:nth-child(3) {
  flex: 0 0 10%;
  background: pink;
}
Run Code Online (Sandbox Code Playgroud)
<table>
  <tbody>
    <tr>
      <td>Ted</td>
      <td>1</td>
      <td>100%</td>
    </tr>
    <tr>
      <td>Turd Ferguson</td>
      <td>2</td>
      <td>65%</td>
    </tr>
    <tr>
      <td>Hingle McKringleberry</td>
      <td>3</td>
      <td>99%</td>
    </tr> …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

8
推荐指数
2
解决办法
1539
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1