CSS表列最小寬度等於文本大小

這是一個響應表，當瀏覽器收縮時會縮小。

我想將列的最小寬度設置爲與標題文本一樣寬。

在CSS中這樣做的最好方法是什麼？

 <table> 
     <thead class="ui-datatable-thead"> 
      <tr class="ui-state-default"> 
       <th class="ui-state-default">COL HEADER</th> 
      </tr> 
     </thead> 
     <tbody class="ui-datatable-data ui-widget-content"> 
      <tr class="ui-widget-content ui-datatable-odd"> 
       <td>DATA</td> 
      </tr> 
     </tbody> 
     </table>

我已經看過其他一些答案，但還沒有找到解決方案。

來源

2017-03-17 Ben Cameron

看看這裏，也許這有助於http://stackoverflow.com/questions/570154/html-table-keep-the-same-width-for-columns – vadber

table { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    margin-bottom: 20px; 
 
} 
 

 
th,td { 
 
    display: table-cell; 
 
    border: 1px dotted red; 
 
    padding: 4px 6px; 
 
    width: 2%; 
 
    margin-bottom: 0; 
 
}

<table> 
 
     <thead class="ui-datatable-thead"> 
 
      <tr class="ui-state-default"> 
 
       <th class="ui-state-default">COL HEADER 1</th> 
 
       <th class="ui-state-default">COL HEADER 2</th> 
 
       <th class="ui-state-default">COL HEADER 3</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody class="ui-datatable-data ui-widget-content"> 
 
      <tr class="ui-widget-content ui-datatable-odd"> 
 
       <td>DATA 1</td> 
 
       <td>DATA 2</td> 
 
       <td>DATA 3</td> 
 
      </tr> 
 
     </tbody> 
 
     </table>

所有你需要一個像我在CSS代碼中提到日& TD表格的佈局單元格的寬度設置爲「fixed'.Just。如果表的總大小是500px，並且有5列，那麼每列將有100px。

table{ 
 
    border: 1px solid black; 
 
    table-layout: fixed; 
 
    width: 500px; 
 
} 
 

 
th, td { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
}

來源

2017-03-17 12:36:06

感謝你。如果我不知道列的寬度，但希望將其設置爲標題文本的寬度可能會有所不同？ –

你可以嘗試新的代碼，我已經提到過 –

您需要修正航向的TD的大小。所以身體的TD將自動採用標題TD中應用的寬度。

來源

2017-03-17 13:41:05 Rohan

CSS表列最小寬度等於文本大小

回答

相關問題