使用不同大小的單元格創建表格

我想讓表格看起來整潔，並且我希望我的單元格根據單元格中的信息具有不同的大小。如何使單元格寬度不同於上面的單元格寬度？使用不同大小的單元格創建表格

好吧，現在我也想知道如何使1個單元高，並有很多小單元格的權利。

實施例：

<html> 
    <table border="1"><td width="50">some info</td><td width="50">some more info</td> 
    <tr> 
    <td width="250">Lots more text and information in this box then the first cell</td><td>  other information</td>

我不想在第一行中的第一單元自動調整到所述第一單元的所述第二行中的長度。

例子：

|some info|some more info| 

|Lots more text and information in this box then the first cell|other information|

或有至少另一種方式奠定了這一點，將看起來很乾淨？

來源

2011-09-29 Justin Yoder

如果你不想在一列所有單元是相同的寬度，那麼你不想使用表格。 – Blazemonger

表中的所有列總是具有相似的寬度（您不能更改它），您只能添加一個單元格並跨第二行中的某些單元格數量。

<html> 
     <table border="1"> 
     <tr> 
      <td width="50">some info</td> 
      <td width="50">some more info</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td width="250" colspan="3">Lots more text and information in this box then the first cell</td> 
      <td>  other information</td>

來源

2011-09-29 18:54:15 Nikita

正是我所期待的。謝謝 –

試試這個 - 使用的DIV來模擬表格的行和列，以及CSS min-width屬性創建「細胞」，根據需要，可以伸展。

http://jsfiddle.net/HN4YS/1/

HTML：

<div class="row"><div class="col1">some info</div><div class="col2">some more info</div></div> 
<div class="row"><div class="col1">Lots more text and information in this box then the first cell</div><div class="col2">other information</div></div>

CSS：

.col1, .col2 { 
    display: inline-block; 
    min-width: 150px; 
    border: 1px solid; 
    padding: 4px; 
} 
.row { 
    white-space: nowrap; 
}

來源

2011-09-29 18:54:37 Blazemonger

使用不同大小的單元格創建表格

回答

相關問題