0

高人，我想制作一个 2 行 3 列的表格或类似的结构，无论我放入什么，宽度或高度都不会改变。在我的表创建的那一刻。顶行是 3 个标题，底行是标题的描述，但由于文本不断改变表格的大小，因此排列不整齐。因此使它看起来不对称。我已经尝试给出宽度和高度长度百分比，但结构仍然会随着文本而改变。我想创建一个实心框架。你能帮助我吗？

4

3 回答 3

0

尝试这个：

小提琴

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 */
}
于 2013-09-17T10:50:00.803 回答
0

这是具有固定结构的示例表

<!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>
于 2013-09-17T11:02:59.250 回答
0

你可以试试这个：

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

但是当您输入太多数据或太长的文本时，可能会导致您的表格看起来像这样： 在此处输入图像描述

编辑：根据 Marc Audet 的说法，这实际上看起来不错： 在此处输入图像描述

于 2013-09-17T10:51:02.967 回答