Question

我正在尝试创建一个表，其中第一列是页面宽度的10％。然后将剩余的90％分成另外两个相等宽度的列。（我这样做是因为我还希望在两列中包含跨行。）

宽度：50％不起作用，而是将两列向上推近。我在Firefox和Chrome中试过这个。

我在下面添加了一个简化的代码段。

.news-table {
  display: table;
  font-family: Arial, Helvetica, sans-serif;
}
.news-tr {
  display: table-row;
}
.news-td {
  display: table-cell;
}

<div class="news-table" style="width: 100%;table-layout:fixed">
  <div class="news-td" style="width: 10%">
    Narrow
  </div>
  <div class="news-td" style="width: 90%">
    <div class="news-tr">
      <div class="news-td" style="width: 50%">
        Wide1
      </div>
      <div class="news-td" style="width: 50%">
        Wide2
      </div>
    </div>
  </div>
</div>

任何建议都将受到赞赏。

Answer 1

使用表格系列标签;有很多，如果没有其他工作可以使用 td 标记的colspan属性。

Answer 2

表通常使用正确的标签而不是div

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Tables</title>
   </head>
   <body>
      <table  class="news-table">
         <tr class="news-tr">
           <td>Row 1, Column 1</td>
           <td>Row 1, Column 2</td>
         </tr>
         <tr class="news-tr">
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
</html>

Answer 3

我可能会补充一下 float: left 以及float: right到列，如果这不起作用，我也会尝试向其中添加position: relative。

这是我为另一个答案提供的代码笔，可能会有所帮助：http://codepen.io/anon/pen/zqvyYp?editors=1000

编辑：http://codepen.io/anon/pen/GZpPrR?editors=1000这个可能更适合您的需求

HTML CSS表格宽度不起作用

3 个答案: