如何從內容自動調整表td寬度

首先請嘗試看看這個jsFiddle，你可以看到我有一個有很多列的表我唯一的問題是我怎樣才能使所有td調整其寬度取決於在沒有包裝文字的情況下，文字內容有多長？如何從內容自動調整表td寬度

這裏是我的HTML代碼：

<div class="content"> 
    <div class="content-header"> 

    </div> 
    <div class="content-loader"> 
     <table> 
      <tbody> 
       <tr> 
        <td>First Name</td> 
        <td>Last Name</td> 
        <td>Gender</td> 
        <td>Birth Date</td> 
        <td>Address</td> 
        <td>Zip Code</td> 
        <td>Nationality</td> 
        <td>Contact Number</td> 
        <td>Email</td> 
        <td>Username</td> 
        <td>Course</td> 
        <td>Year</td> 
        <td>ID Number</td> 
        <td>Subjects</td> 
        <td>Other Fields</td> 
        <td>Other Fields</td> 
        <td>Other Fields</td> 
        <td>Other Fields</td> 
        <td>Other Fields</td> 
        <td>Other Fields</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>

，這裏是我的CSS代碼：

.content { 
    width: 1100px; 
    height: 200px; 
    background: #fdfdfd; 
    margin: 0px auto; 
    position: relative; 
    top: 40px; 
    border: 1px solid #aaaaaa; 
} 

.content .content-header { 
    width: 100%; 
    height: 40px; 
    background-color:#aaa; 
    background-image:-moz-linear-gradient(top,#eeeeee,#cccccc); 
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc)); 
    background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc); 
    background-image:-o-linear-gradient(top,#eeeeee,#cccccc); 
    background-image:linear-gradient(to bottom,#eeeeee,#cccccc); 
    border-bottom: 1px solid #aaaaaa; 
} 

.content-loader { 
    overflow: scroll; 
} 
.content-loader table { 
    width: auto; 
    background: #aaa; 
} 

.content-loader table tr { 
    background: #eee; 
} 

.content-loader table tr td { 

}

是否有人可以幫助我？或者如果已經在這裏詢問，請告訴我鏈接。

來源

2014-02-07 Pengun

刪除所有寬度和添加。內容裝載機表TR TD { 空白：NOWRAP; }？ –

由於容器的寬度是固定的，因此它內部的字段太多以致無法正確安裝。如果你少了它可能會自己調整。 – scooterlord

刪除所有寬度使用CSS設置，並設置空白，以NOWRAP像這樣：

.content-loader tr td { 
    white-space: nowrap; 
}

我也從容器中取出固定寬度（或添加overflow-x: scroll到容器），如果你想要的字段沒有它尋找奇怪的全部顯示...

查看更多在這裏：http://www.w3schools.com/cssref/pr_text_white-space.asp

來源

2014-02-07 16:11:40

使用無字包裝這種風格屬性：

white-space: nowrap;

來源

2014-02-07 16:15:28 NerdNeo

你也可以使用display: table insted表。 Div比表格更靈活。

實施例：

.table { 
 
    display: table; 
 
    border-collapse: collapse; 
 
} 
 
    
 
.table .table-row { 
 
    display: table-row; 
 
} 
 
    
 
.table .table-cell { 
 
    display: table-cell; 
 
    text-align: left; 
 
    vertical-align: top; 
 
    border: 1px solid black; 
 
}

<div class="table"> 
 
\t <div class="table-row"> 
 
\t \t <div class="table-cell">test</div> 
 
\t \t <div class="table-cell">test1123</div> 
 
\t </div> 
 
\t <div class="table-row"> 
 
\t \t <div class="table-cell">test</div> 
 
\t \t <div class="table-cell">test123</div> 
 
\t </div> 
 
</div>

來源

2016-10-31 08:26:34 warch

如何從內容自動調整表td寬度

回答

相關問題