Question

我想用visualforce做状态板。

当我测试HTML页面时，它可以工作。

但是，它无法在visualforce页面上使用相同的代码。

我不知道为什么样式的高度不适用于表格，样式的垂直对齐不适用于div中的图像。

图片1：HTML页面

enter image description here

图片2：Visualforce页面

enter image description here

代码如下：

<apex:page showHeader="false"
    standardStylesheets="false" sidebar="false" applyHtmlTag="false"
    applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <title>수술/시술 상황판</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- Import the Design System style sheet
          <apex:slds />
           TODO : api version error / find how to solve the problem -->
        <style>
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            table {
                border-collapse: collapse;
                margin: 2.5px;
                padding: 2.5px;
            }   
            th  {
                border: 1px solid black;
            }
            td  {
                border: 1px solid black;
            }
        </style>
        </head>
        <body>
            <div
                style="float: left; background-color: aqua; width: 60%; height: 100%"
                align="center">
                <table style="width: 99%; height: 99%;">
                    <colgroup>
                        <col width="25%" />
                        <col width="25%" />
                        <col width="25%" />
                        <col width="" />
                    </colgroup>
                    <tr style="height: 5%;">
                        <th>501호</th>
                        <th>502호</th>
                        <th>503호</th>
                        <th>504호</th>
                    </tr>
                    <tr style="height: 28.3%;">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr style="height: 5%;">
                        <th>101호</th>
                        <th>102호</th>
                        <th>103호</th>
                        <th>104호</th>
                    </tr>
                    <tr style="height: 28.3%;">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr style="height: 5%;">
                        <th >수술실 1</th>
                        <th >수술실 2</th>
                        <th >수술실 3</th>
                        <th >레이저실(107호)</th>
                    </tr>
                    <tr style="height: 28.3%;">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div
                style="float: left; background-color: green; width: 40%; height: 38.5%; vertical-align: middle;">
                <div align="center">
                    <img alt="Mods Clinic Logo"
                        src="http://www.modsclinic.co.kr/assets/front/images/main/logo.png"
                        style="width: 90%;" /><br />
                    <h1 style="color: white; margin: 0; padding: 0; margin-bottom: 5px">상
                        황 판</h1>
                </div>
            </div>
            <div
                style="float: left; background-color: orange; width: 30%; height: 61.5%">
                <table style="width: 99%; height: 99%;">
                    <colgroup>
                        <col width="33%"/>
                        <col width="33%"/>
                        <col width=""/>
                    </colgroup>
                    <tr style="height: 7.5%;">
                        <th>메디짐 운동실</th>
                        <th>메디짐 치료실</th>
                        <th>회복실1(105호)</th>
                    </tr>
                    <tr style="height: 25.83%;">
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr style="height: 7.5%;">
                        <th>상담실1</th>
                        <th>상담실2</th>
                        <th>회복실2(107호)</th>
                    </tr>
                    <tr style="height: 25.83%;">
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr style="height: 7.5%;">
                        <th>상담실3</th>
                        <th>상담실4</th>
                        <th>미팅룸</th>
                    </tr>
                    <tr style="height: 25.83%;">
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div
                style="float: left; background-color: yellow;; width: 10%; height: 30.75%">
                <table style="width: 99%; height: 99%;">
                    <tr style="height: 15%;">
                        <th>대기자</th>
                    </tr>
                    <tr style="height: 85%;">
                        <td></td>
                    </tr>
                </table>
            </div>
            <div
                style="float: left; background-color: silver; width: 10%; height: 30.75%">
                <table style="width: 99%; height: 99%;">
                    <tr style="height: 15%;">
                        <th >시술마침</th>
                    </tr>
                    <tr style="height: 85%;">
                        <td></td>
                    </tr>
                </table>
            </div>
        </body>
    </html>
</apex:page>

请帮助我。

在visualforce中，CSS样式的高度不适用于表格

0 个答案: