如何让PowerShell导出的HTML报告中两列内容并排显示？

要让“Operating System”和“System Model”内容左右并排，核心是给HTML添加自定义CSS布局样式，替代默认的堆叠显示。以下是具体修改方案：

方案1：使用Flexbox布局（推荐） #

Flexbox是现代浏览器支持的灵活布局方式，能轻松实现两列均分宽度：

修改后的完整脚本 #

# 定义自定义CSS样式
$css = @"
<style>
    .two-column-container {
        display: flex;
        gap: 20px; /* 列之间的间距 */
        width: 100%;
        margin: 20px 0;
    }
    .column {
        flex: 1; /* 让两列自动平分可用宽度 */
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    /* 表格基础样式优化 */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>
"@

# 获取系统信息
$osInfo = Get-CimInstance Win32_OperatingSystem | Select-Object Caption, Version, InstallDate
$systemModel = Get-CimInstance Win32_ComputerSystem | Select-Object Model, Manufacturer, TotalPhysicalMemory

# 构建HTML内容，嵌入两列布局
$htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <title>Hardware Report</title>
    $css
</head>
<body>
    <h1>Hardware Report</h1>
    <div class="two-column-container">
        <div class="column">
            <h2>Operating System</h2>
            <table>
                <tr><th>Property</th><th>Value</th></tr>
                <tr><td>Caption</td><td>$($osInfo.Caption)</td></tr>
                <tr><td>Version</td><td>$($osInfo.Version)</td></tr>
                <tr><td>Install Date</td><td>$($osInfo.InstallDate.ToString('yyyy-MM-dd'))</td></tr>
            </table>
        </div>
        <div class="column">
            <h2>System Model</h2>
            <table>
                <tr><th>Property</th><th>Value</th></tr>
                <tr><td>Model</td><td>$($systemModel.Model)</td></tr>
                <tr><td>Manufacturer</td><td>$($systemModel.Manufacturer)</td></tr>
                <tr><td>Total Memory</td><td>$([math]::Round($systemModel.TotalPhysicalMemory / 1GB, 2)) GB</td></tr>
            </table>
        </div>
    </div>
</body>
</html>
"@

# 导出HTML文件
$htmlContent | Out-File -FilePath "HardwareReport.html" -Encoding UTF8

方案2：使用Grid布局（备选） #

如果需要更规整的网格布局，可将CSS中的.two-column-container样式替换为：

.two-column-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 直接定义两列宽度均分 */
    gap: 20px;
    width: 100%;
    margin: 20px 0;
}

效果说明 #

两种方案都会让“Operating System”和“System Model”模块左右并排，填满页面宽度，列间距和边框样式可根据需求调整。如果需要适配移动端，可添加媒体查询，但默认情况下桌面端会保持两列布局。

内容的提问来源于stack exchange，提问作者AaronJK