如何使列的宽度相同并在宽度和高度上填充整个空间？答案

【问题标题】：How to make columns the same width and fill the entire space in width and height?如何使列的宽度相同并在宽度和高度上填充整个空间？
【发布时间】：2019-12-17 16:35:31
【问题描述】：

我创建了一个带有表格的页面，该表格的宽度和高度应填满整个浏览器窗口。第一行是标题，第二行包含三个单元格：第一个单元格的宽度应根据其内容（固定），第二个和第三个单元格的宽度应相等并占据宽度和高度的所有剩余空间.问题是当我通过<col width="50%"> 标签设置它们的宽度时，它们的宽度呈现不同！

这是重现问题的最小工作示例：

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background: #CCCCCC;
            margin: 0px;
        }
        table {
            border-spacing: 15px 0px;
            width: 100%;
            height: 100%;
        }
        .panelsMain {
            display: inline-block;
            background: white;
            padding: 0px;
            margin: 0px;
            border-radius: 5px;
            width: 100%;
            height: 98%;
        }
    </style>
</head>
<body>
    <table id="mainTable">
        <col width="auto">
        <col width="50%">
        <col width="50%">
        <tr height="50px" valign="top">
            <td colspan="3" style="text-align: center">
                <h1>Header</h1>
            </td>
        </tr>
        <tr>
            <td valign="top">
                <p style="width:200px">
                    some objects of fixed width
                </p>
            </td>
            <td valign="top" height="100%">
                <div class="panelsMain">
                    sssssssssssssssssssssssssssssssssssssss
                </div>
            </td>
            <td valign="top" height="100%">
                <div class="panelsMain">
                    fffffffff
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

如何使第二列和第三列的宽度相等？

更新

使用Aravind Anil 建议的方法，我得到了以下解决方案，它几乎完全符合我的需求，除了面板之间的距离错误（应该等于15px 和border-spacing: 中的border-spacing: table）：

<html>    
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background: #CCCCCC;
            margin: 0px;
        }    
        table {
            border-spacing: 15px 0px;
            width: 100%;
            height: 100%;
        }    
        .panelsMain {
            display: inline-block;
            background: white;
            padding: 0px;
            margin: 0px;
            border-radius: 5px;
            width: 50%;
            height: 98%;
        }
    </style>
</head>    
<body>
<table id="mainTable">
    <col width="auto">
    <col width="auto">
    <tr height="50px" valign="top">
        <td colspan="3" style="text-align: center">
            <h1>Header</h1>
        </td>
    </tr>
   <tr>
      <td valign="top">
         <p style="width:200px">some objects of fixed width</p>
      </td>
      <td valign="top" height="100%"><nobr>
          <div class="panelsMain">sssssssssssssssssssssssssssssssssssssss</div>
          <div class="panelsMain">fffffffff</div></nobr>
       </td>
    </tr>
    </table>
</body></html>

通过为第二个面板设置margin-left:15px 来增加距离的尝试并没有得到预期的结果：第二个面板只是向右移动了 15 个像素并离开了窗口。如何控制面板之间的距离？

【问题讨论】：

您是否尝试将这些列（需要具有相同大小的列）绑定到单个 div 中，然后应用宽度 = 50% 的相同类
@AravindAnil 像这样：<div style="width:50%"><td>...</td><td>...</td></div>?它不会改变外观。还是我只是误会了你？你能举个例子吗？
在我开始误导你之前，你是否有必要将html结构保留为3 ？
@AravindAnil 实际上我在第二个 <tr> 中有 2 个 <tr> 和 3 个 <td>。而不是，我只需要外观，其他方法也适合。
仅供参考：valign 是已弃用的 HTML5 属性，应替换为 CSS 规则。

【解决方案1】：

我已经使用 CSS grid 成功解决了这个问题，正如 cmets 中 Aravind Anil 所建议的那样。这是解决方案：

<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background: #CCCCCC;
            margin: 10px;
        }

        .item-header {
            grid-area: header;
            justify-self: center;
            padding: 1rem;
           
        }

        .item-sidebar {
            grid-area: sidebar;
            padding: 1rem;
        }

        .item-main-1 {
            grid-area: main-block-1;
            background: white;
            padding: 1rem;
            border-radius: 5px;
        }

        .item-main-2 {
            grid-area: main-block-2;
            background: white;
            padding: 1rem;
            border-radius: 5px;
        }

        .container {
            display: grid;
            grid-template-columns: auto 1fr 1fr;
            grid-template-rows: 60px 1fr;
            grid-template-areas:
                "header header header"
                "sidebar main-block-1 main-block-2";
            grid-column-gap: 15px;
            grid-row-gap: 15px;
            width:100%;
            height: 100%;
        }
        
    </style>
</head>

<body>

    <div class="container">
        <div class="item-header">
            Header
        </div>
        <div class="item-sidebar">
            buttons
        </div>
        <div class="item-main-1">
            first
        </div>
        <div class="item-main-2">
            second
        </div>
    </div>

</body>

</html>

【讨论】：

【解决方案2】：

<table id="mainTable">
    <col width="auto">
    <col width="auto">
    <tr height="50px" valign="top">
        <td colspan="3" style="text-align: center">
            <h1>Header</h1>
        </td>
    </tr>
   <tr>
      <td valign="top">
         <p style="width:200px">some objects of fixed width</p>
      </td>
      <td valign="top" height="100%">
          <div class="panelsMain" style="width:50%">sssssssssssssssssssssssssssssssssssssss</div>
          <div class="panelsMain" style="width:50%">fffffffff</div>
       </td>
    </tr>
    </table>
</body>
</html>

有点像这样的结构可以达到你要求的结果。还要确保向中间 div 添加足够的 margin-right 以获得预期的外观。如果我误解了您的问题，请纠正我。

【讨论】：

谢谢，在用<nobr></nobr> 包裹两个面板后，几乎可以实现所需的外观。如何最好地控制面板之间的距离以将其设置为等于 15px（如 table 中的 border-spacing:）？
我相信您可能需要为第一个面板选择一些相对大小（而不是自动）。问题是其他面板不知道这个“自动”设置大小。为了获得这样的灵活性，我强烈建议您使用网格/弹性框，这将有效地处理整个可用空间:) css-tricks.com/snippets/css/complete-guide-grid
感谢您将我引导至grid，我能够使用它解决问题。请看我的回答。