css：如何在使用display：table時更改表的大小？

Question

CSS

<style> 
.featuresContainer { display: table; } 
.featuresContent { display: table-row; } 
.contentLeft { 
    display: table-cell; 
    width: 50%; 
    background-color: red; 
    vertical-align: middle; 
    padding: 7px; 
} 

.contentRight { 
    display: table-cell; 
    width: 50%; 
    background-color: blue; 
    padding: 7px; 
    vertical-align: middle; 
} 
</style> 

HTML：

<div class="featuresContainer"> 
    <div class="featuresContent"> 
     <div class="contentLeft"> 
      <h3>Assignments Tool</h3> 
      <ul> 
       <li>Any type of assignment or assessment</li> 
       <li>Quizzes</li> 
       <li>Tests</li> 
       <li>Polls</li> 
       <li>Discussion Forum with tone meter</li> 
      </ul> 
     </div> 
     <div class="contentRight"> 
      <img src="https://sandbox.velop.org/styles/default/velop/images/assingments_tool.png" /> 
     </div> 
    </div> 
    <div class="featuresContent"> 
     <div class="contentLeft"> 
      <img src="https://sandbox.velop.org/styles/default/velop/images/web_tool.png" />   
     </div> 
     <div class="contentRight"> 
      <h3>Web Tool</h3> 
      <ul> 
       <li>Web link</li> 
       <li>Any RSS feed</li> 
       <li>Youtube and Vimeo integration and tracking</li> 
      </ul> 
     </div> 
    </div> 
</div> 

問：

如何改變表的大小？我只希望表格是整個頁面的半寬。我試過.featuresContainer { display: table; width:50%;}但它不起作用。

Answer 1

使用這樣的：

.featuresContainer { display: table; width:50%; table-layout: fixed;}