0

Есть страничка

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>testPrj</title>
    <style>
        .wrapper {
          height: 100%;
          display: table;
          width: 100%;
        }

        .header {
          display: table-row;
          height: 1px;
        }

        .main {
          height: 100%;
          display: table;
          width: 100%;
        }

        .horizontalbar {
          display: table-row;
          height: 0px;
        }

        .box {
          display: table-cell;
        }

        .sidebar {
            width: 0px;
        }

        .sidebar table {
            /*height: 100%;*/
            width: 100%;
            position: relative;
            top: 0;
            border-collapse: collapse;
            /*display: block;*/
        }

        .sidebar table, th, td {
            border: 1px solid black;
        }

        .content {
          height: 100%;
        }

        .content iframe {
          width: 100%;
          height: 100%;
          border: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .footer {
          display: table-row;
          height:1px;
        }

        /* Basic Style*/
        * { 
            margin:0;
            padding:0;
        }

        html, body {
          height: 100%;
        }

    </style>
</head>

<body bgcolor="#FFFFFF">
    <div class="wrapper">

        <div class="header">
            <a href="testTable.html">Untitled</a>
        </div>

        <div class="main">

            <div class="horizontalbar"></div>

            <div class="box sidebar"></div>

            <div class="box content">
                <iframe frameborder="0" marginwidth="0" marginheight="0" src="test.svg" id="test_0Id"></iframe>
            </div>

            <!--<div class="box sidebar"></div>-->

            <div class="box sidebar">
                <table cellpadding="5">
                    <caption>Список переменных и их значения</caption>
                    <tr>
                        <th>Переменная</th>
                        <th>Значение</th>
                    </tr>
                    <tr>
                        <td>mon1</td>
                        <td><div contenteditable="true">false</div></td>
                    </tr>
                    <tr>
                        <td>mon2</td>
                        <td><div contenteditable="true">false</div></td>
                    </tr>
                </table>                
            </div>

            <div class="horizontalbar"></div>
        </div>

        <div class="footer">Footer text</div>

    </div>

    <script type="text/javascript" src="test_0.js"></script>
</body>
</html>

Отображается следующий результат введите сюда описание изображения

Как таблицу (снизу слева), поднять вверх. Пробовал различные варианты position (+ top), ничего не вышло.

1
  • Делайте с помощью flexbox или float 22 ноя 2018 в 10:59

2 ответа 2

1

Попробуйте просто выравнять элемент по вертикали относительно своего родителя

.box {
    display: table-cell;
    vertical-align: top;
}
0

Попробуйте обнулить отступы

body {
    margin: 0;
    padding: 0;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.