更改表列寬

我使用反應庫建在下面的模板表：更改表列寬

<div class="table-container" style="width:100%"> 
    <table style="width:100%"> 
     <thead> 
      <tr> 
       <th>BLA_Column</th> 
      </tr> 
     </thead> 
    </table> 
    <table style="width:100%"> 
     <tbody> 
      <tr> 
       <td>BLA_Body</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

我能設置個的寬度和TD爲自動，但是，結果是我得到兩種不同的尺寸（一個用於th和一個用於td）。當我嘗試使用以下的選擇（例如），沒有任何反應：

table > thead > th { 
    width: 100px; 
}

此外，當我嘗試使用Chrome瀏覽器開發工具直接改變寬度，也完全沒有變化。

謝謝！

來源

2017-02-28 Hamus

也許你可以考慮改變表是CSS'flex'對象，或表容器 – user3691763

我認爲你有什麼問題在你的CSS選擇器：用更改CSS 'table> thead> th' ...'th'不是'thead'的直接後代（'>'） –

我認爲問題是table'width：100％' - 'th'是'display： table-cell「 - 將其更改爲其他值，例如'inline-block'。看到這裏 - > http://codepen.io/sol_b/pen/wJKrXp – sol

CSS character>只選擇直接的孩子。

table > thead th { 
    width: 100px; 
}

或

table > thead > tr > th { 
    width: 100px; 
}

來源

2017-02-28 15:53:23 Camille

回答

相關問題