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表格寬度不工作

回答

相關問題