Question

我创建了一个包含表格的页面，该表格应在宽度和高度上填充整个浏览器窗口。第一行是标题，第二行包含三个单元格：第一单元格的宽度应根据其内容（固定）而定，第二和第三单元格的宽度应相等，并在宽度和高度上占据所有剩余空间。问题是，当我通过<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:相等） 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个像素，并离开了窗口。如何控制面板之间的距离？

Answer 1

我已经使用Aravind Anil在评论中建议的CSS grid成功解决了该问题。解决方法如下：

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

Answer 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处添加足够的边距，以得到预期的外观。如果我误解了您的问题，请纠正我。

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

更新

2 个答案: