如何在html中创建大小不改变的表
高的家伙，我想做一个2排3列的桌子或类似的结构，无论我在里面放什么，都不会改变宽度或高度。在创建我的表时。最上面一行是3个标题，最下面一行是对标题的描述，但由于文本不断改变表格的大小，因此排列不整齐。因此使它看起来不是对称的。我已经试着给出了宽度和高度长度的百分比，但结构仍然随着文本而改变。我想创建一个坚实的框架。你能帮我吗？试试这个：如何在html中创建大小不改变的表,html,css,internet-explorer,dreamweaver,Html,Css,Internet Explorer,Dreamweaver,高的家伙，我想做一个2排3列的桌子或类似的结构，无论我在里面放什么，都不会改变宽度或高度。在创建我的表时。最上面一行是3个标题，最下面一行是对标题的描述，但由于文本不断改变表格的大小，因此排列不整齐。因此使它看起来不是对称的。我已经试着给出了宽度和高度长度的百分比，但结构仍然随着文本而改变。我想创建一个坚实的框架。你能帮我吗？试试这个： table { table-layout: fixed; width: 100%; } th, td { height: 100px
table
{
table-layout: fixed;
width: 100%;
}
th, td
{
height: 100px; /*whatever you need */
break-word: word-wrap; /* prevent td's to stretch to fit long words */
}
<table>
<tr>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1
</div>
</td>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2
</div>
</td>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Title 3 Title 3 Title 3 Title 3 Title 3 Title 3 Title 3 Title 3 Title 3
</div>
</td>
</tr>
<tr>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Description 1 Description 1 Description 1
</div>
</td>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Description 2 Description 2 Description 2
</div>
</td>
<td style="height: 50px; width: 100px; border: 1px solid black;">
<div style="height: inherit;">
Description 3 Description 3 Description 3
</div>
</td>
</tr>
</table>
标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1
标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2
第3篇第3篇第3篇第3篇第3篇第3篇第3篇第3篇第3篇第3篇第3篇
描述1描述1描述1
描述2描述2描述2
说明3说明3说明3
这是固定结构的示例表
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style type="text/css">
#gradient-style
{
width: 100%;
text-align: left;
border-collapse: collapse;
table-layout: fixed;
text-align: center;
border: 1px solid black;
}
#gradient-style th
{
padding: 6px;
width: auto;
}
#gradient-style td
{
text-align: center;
vertical-align: middle;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<table id="gradient-style" cellspacing="0">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Table description goes here....</td>
</tr>
</tfoot>
</table>
</body>
</html>
桌子
#渐变风格
{
宽度：100%；
文本对齐：左对齐；
边界塌陷：塌陷；
表布局：固定；
文本对齐：居中；
边框：1px纯黑；
}
#渐变式th
{
填充：6px；
宽度：自动；
}
#渐变式td
{
文本对齐：居中；
垂直对齐：中间对齐；
高度：20px；
边框：1px纯黑；
}
第1栏
第2栏
第3栏
一排
一排
一排
第2排
第2排
第2排
表说明如下所示。。。。
divoverflow:autooverflow:hidden