Question

我想知道css中有哪些可靠的选项可用于模仿具有广泛浏览器支持的基本＆lt; table＆gt;类布局。

以下是使用实际表格的简单示例。

有没有更好的方法来使用CSS，这也适用于最近不完善的浏览器？（IE10 / IE11 +）

＆＃13;

table tr td:nth-child(1) {
  width: 200px;
  text-align: right;
}

＆＃13;

<table>
  <tr>
    <td>apple</td>
    <td><input type="text" style="width:200px"></td>
    <td rowspan="4" valign="top" style="padding-left:50px;">
      checkboxes:<br>
      <input type="checkbox"> hello<br>
      <input type="checkbox"> world<br>
    </td>
  </tr>
  <tr>
    <td>banana</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>cherry</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="text"></td>
  </tr>
</table>

＆＃13;

Answer 1

您可以使用div和display: table，display: table-row和display: table-cell。

Answer 2

CSS3网格布局将起到作用。

https://developer.mozilla.org/en/docs/Web/CSS/CSS_Grid_Layout

但要注意兼容性。

https://caniuse.com/#search=css%20grid%20layout

html 5中的表格式布局，具有广泛的浏览器支持

2 个答案: