設置表格列寬

Question

我有一個用於收件箱一個簡單的表如下：

<table border="1"> 
     <tr> 
      <th>From</th> 
      <th>Subject</th> 
      <th>Date</th> 
     </tr> 

如何設置寬度，以便從和日期的頁面寬度的15％和主題是70％。我也希望表格佔用整個頁面寬度。

Answer 1

HTML：

<table> 
    <thead> 
    <tr> 
     <th class="from">From</th> 
     <th class="subject">Subject</th> 
     <th class="date">Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>[from]</td> 
     <td>[subject]</td> 
     <td>[date]</td> 
    </tr> 
    </tbody> 
</table> 

CSS：

table { 
    width: 100%; 
    border: 1px solid #000; 
} 
th.from, th.date { 
    width: 15% 
} 
th.subject { 
    width: 70%; /* Not necessary, since only 70% width remains */ 
} 

最好的做法是讓你的HTML和CSS分開了更少的代碼複製，併爲關注點分離（HTML的結構和語義，和用於演示的CSS）。

請注意，爲了在較舊版本的Internet Explorer中工作，您可能必須爲表格指定一個特定寬度（例如900px）。如果包裝器沒有精確的尺寸，那麼該瀏覽器在渲染具有百分比尺寸的元素時會遇到一些問題。

Answer 2

<table style="width: 100%"> 
 
    <colgroup> 
 
     <col span="1" style="width: 15%;"> 
 
     <col span="1" style="width: 70%;"> 
 
     <col span="1" style="width: 15%;"> 
 
    </colgroup> 
 
    
 
    
 
    
 
    <!-- Put <thead>, <tbody>, and <tr>'s here! --> 
 
    <tbody> 
 
     <tr> 
 
      <td style="background-color: #777">15%</td> 
 
      <td style="background-color: #aaa">70%</td> 
 
      <td style="background-color: #777">15%</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 3

取決於你的身體（或披着你的表格），你應該能夠做到這一點的 '設置'：

body { 
    width: 98%; 
} 

table { 
    width: 100%; 
} 


th { 
    border: 1px solid black; 
} 


th.From, th.Date { 
    width: 15%; 
} 

th.Date { 
    width: 70%; 
} 


<table> 
    <thead> 
    <tr> 
     <th class="From">From</th> 
     <th class="Subject">Subject</th> 
     <th class="Date">Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Me</td> 
     <td>Your question</td> 
     <td>5/30/2009 2:41:40 AM UTC</td> 
    </tr> 
    </tbody> 
</table> 

Demo

Answer 4

不要使用邊框屬性，使用CSS來滿足您的所有樣式需求。

<table style="border:1px; width:100%;"> 
    <tr> 
      <th style="width:15%;">From</th> 
      <th style="width:70%;">Subject</th> 
      <th style="width:15%;">Date</th> 
    </tr> 
... rest of the table code... 
</table> 

但嵌入CSS一樣，是不良的做法 - 應該使用CSS類來代替，並把CSS規則在外部CSS文件。

Answer 5

使用下面的CSS，第一個聲明將確保您的表粘在寬度您提供（你需要在你的HTML中添加類）：

table{ 
    table-layout:fixed; 
} 
th.from, th.date { 
    width: 15%; 
} 
th.subject{ 
    width: 70%; 
} 

Answer 6

替代辦法只有一個類，而保持在一個CSS文件，甚至工作在IE7您的樣式：

<table class="mytable"> 
    <tr> 
     <th>From</th> 
     <th>Subject</th> 
     <th>Date</th> 
    </tr> 
</table> 
<style> 
    .mytable td, .mytable th { width:15%; } 
    .mytable td + td, .mytable th + th { width:70%; } 
    .mytable td + td + td, .mytable th + th + th { width:15%; } 
</style> 

最近，您還可以使用來自CSS3（IE9 +）時，nth-child()選擇，你只希望把NR。而不是將它們與相鄰的選擇器串聯在一起。像這樣，例如：

<style> 
    .mytable tr > *:nth-child(1) { width:15%; } 
    .mytable tr > *:nth-child(2) { width:70%; } 
    .mytable tr > *:nth-child(3) { width:15%; } 
</style> 

Answer 7

試試這個。

<table style="width: 100%"> 
    <tr> 
     <th style="width: 20%"> 
      column 1 
     </th> 
     <th style="width: 40%"> 
      column 2 
     </th> 
     <th style="width: 40%"> 
      column 3 
     </th> 
    </tr> 
    <tr> 
     <td style="width: 20%"> 
      value 1 
     </td> 
     <td style="width: 40%"> 
      value 2 
     </td> 
     <td style="width: 40%"> 
      value 3 
     </td> 
    </tr> 
</table> 

Answer 8

這裏做到這一點在CSS，即使在不支持:nth-child舊的瀏覽器和類似選擇另一種工作方式最小：http://jsfiddle.net/3wZWt/。

HTML：

<table> 
    <tr> 
     <th>From</th> 
     <th>Subject</th> 
     <th>Date</th> 
    </tr> 
    <tr> 
     <td>Dmitriy</td> 
     <td>Learning CSS</td> 
     <td>7/5/2014</td> 
    </tr> 
</table> 

CSS：

table { 
    border-collapse: collapse; 
    width: 100%; 
} 

tr > * { 
    border: 1px solid #000; 
} 

tr > th + th { 
    width: 70%; 
} 

tr > th + th + th { 
    width: 15%; 
} 

Answer 9

<table> 
    <col width="130"> 
    <col width="80"> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td>$80</td> 
    </tr> 
</table> 

Demo

Answer 10

這些是我的兩個建議。

1. 使用類。有沒有必要指定兩個其他列的寬度，因爲他們將被瀏覽器自動設置爲各15％。

   table { table-layout: fixed; } 
    
       .subject { width: 70%; }

   <table> 
    
        <tr> 
    
        <th>From</th> 
    
        <th class="subject">Subject</th> 
    
        <th>Date</th> 
    
        </tr> 
    
       </table>

2. 不使用類。三種不同的方法，但結果是相同的。

   一）

   table { table-layout: fixed; } 
    
       th+th { width: 70%; } 
    
       th+th+th { width: 15%; }

   <table> 
    
        <tr> 
    
        <th>From</th> 
    
        <th>Subject</th> 
    
        <th>Date</th> 
    
        </tr> 
    
       </table>

   B）

   table { table-layout: fixed; } 
    
       th:nth-of-type(2) { width: 70%; }

   <table> 
    
        <tr> 
    
        <th>From</th> 
    
        <th>Subject</th> 
    
        <th>Date</th> 
    
        </tr> 
    
       </table>

   C）這是我的最愛。與b）相同，但具有更好的瀏覽器支持。

   table { table-layout: fixed; } 
    
       th:first-child+th { width: 70%; }

   <table> 
    
        <tr> 
    
        <th>From</th> 
    
        <th>Subject</th> 
    
        <th>Date</th> 
    
        </tr> 
    
       </table>

Answer 11

table { table-layout: fixed; } 
 
    .subject { width: 70%; }

<table> 
 
     <tr> 
 
     <th>From</th> 
 
     <th class="subject">Subject</th> 
 
     <th>Date</th> 
 
     </tr> 
 
    </table>