使用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)