HTML CSS表格宽度不工作

我想创建一个表格，其中第一列是页面宽度的10％。其余的90％然后被分成两个进一步等宽的列。（我这样做，因为我也想包括跨两列的跨度行。）HTML CSS表格宽度不工作

宽度：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>

任何建议将受到赞赏。

来源

2016-03-05 carrp

使用表族系列标签;有相当多的，如果没有其他工作使用标签的colspan属性。

来源

2016-03-05 17:57:31

表正常使用适当的标签不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>

来源

2016-03-05 17:58:43 scaisEdge

我使用的div，这样我也可以创建响应式页面不会为移动设备使用表格。 – carrp

有表格响应也像bootstrap ...如果你使用div那么可能你指的是网格 – scaisEdge

我可能会添加 float: left 和float: right的列，如果不工作，我也尝试加入position: relative它。

下面是一个代码笔我的另一个答案可能会有所帮助制造：http://codepen.io/anon/pen/zqvyYp?editors=1000

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

来源

2016-03-05 18:24:29

HTML CSS表格宽度不工作

回答

相关问题