Question

我希望我的表单看起来整洁，我希望我的单元格大小不同，具体取决于单元格中的信息。如何使单元格宽度与上面的单元格宽度不同？

好了，现在我也想知道如何制作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|

或者是否至少有另一种方法来展示它看起来干净？

Answer 1

表中的所有列总是具有相似的宽度（您无法更改它），您只能添加一个单元格并在第二行中跨越一定数量的单元格。

  <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>

Answer 2

尝试此操作 - 使用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;
}

创建具有不同大小的单元格的表

2 个答案: