Html 创建具有不同大小单元格的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7601945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating tables with different sized cells
提问by Justin Yoder
I want to make my form to look neat and I want my cells to be different sizes depending on the information in the cell. How do I make a cell width different then the one above it?
我想让我的表格看起来整洁，我希望我的单元格根据单元格中的信息具有不同的大小。如何使单元格宽度与其上方的单元格宽度不同？
OK now i also want to know how to make 1 cell tall and have a lot of small cells to the right of it.
好的，现在我也想知道如何使 1 个单元格高并在其右侧有很多小单元格。
Example:
例子：
<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>
I don't want the first cell in the first row to automatically resize to the length of the first cell in the second row.
我不希望第一行中的第一个单元格自动调整为第二行中第一个单元格的长度。
Example:
例子：
|some info|some more info|
|Lots more text and information in this box then the first cell|other information|
or is there at least another way to lay this out that would look clean?
或者至少有另一种方式来布置这个看起来很干净？
回答by Nikita
All column in table always have similar width (you can't change it), you can only add one more cell and span some amount of cells in second row.
表格中的所有列始终具有相似的宽度（您无法更改它），您只能再添加一个单元格并在第二行中跨越一定数量的单元格。
<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>
回答by Blazemonger
Try this -- use DIVs to simulate table rows and columns, and the CSS min-widthproperty to create "cells" that can stretch as needed.
试试这个——使用 DIV 来模拟表格的行和列，并使用 CSSmin-width属性来创建可以根据需要拉伸的“单元格”。
html:
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:
css：
.col1, .col2 {
display: inline-block;
min-width: 150px;
border: 1px solid;
padding: 4px;
}
.row {
white-space: nowrap;
}
