模态表内的表被切断答案

【问题标题】：Table inside a modal is being cutoff模态表内的表被切断
【发布时间】：2018-12-25 08:16:57
【问题描述】：

我想在模态框内有一个表格来显示一些数据。但是当我将表格大小设置为大于 1 行时（我使用滚动条，因此，每次都大于一行），我的表格正在被切割。我想尽可能多地设置它可以容纳在模态中，这样您就可以在不向下滚动滚动条的情况下看到尽可能多的行，但是当我将表格高度设置为高于 100px 时，它开始被剪切。这是一个例子：

<!DOCTYPE html>
<html>
<head>
    <script src = "jquery.js"></script>
    <script src = "Sources/Chart.js"></script>
    <link rel = "stylesheet" type="text/css" href = 
"Sources/bootstrap.css">
    <script src = "client.js"></script>
    <link rel = "stylesheet" type="text/css" href = 
"Sources/MatirialIcons.css">
    <link rel = "stylesheet" type="text/css" href = 
"Sources/Matirialize.css">
    <script type = "text/javascript"
            src = "Sources/jquery-2.1.1.js"></script>
    <script src = "Sources/Matirialize.js"></script>
    <meta name="viewport" content="width=device-width, initial-
scale=1">

</head>
<body>
</div>
<button class = "btn waves-effect waves-light red" id = "SendBtn">
    <i class = "material-icons">send</i></button>
<!-- Modal Trigger -->
<a class="waves-effect waves-light red btn modal-trigger" 
href="#modal1">Show Data</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Server's test results</h4>
        <p id = "modalParagraph"></p>
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect 
waves-green btn-flat">Close</a>
        <a href="#modal2" class=" waves-effect waves-light red btn 
modal-trigger">Data</a>
    </div>
</div>
<div id="modal2" class="modal">
    <div class="modal-content">
        <h4>Data Table</h4>
    </div>
    <div class="modal-footer">
        <div style="overflow:scroll;height:600px;width:100%;">
            <table style="width:100%;height:100%" id = 
"ModalChanTable">
                <tr id = "1">
                    <th>example1</th>
                    <th>example1</th>
                    <th>example1</th>
                </tr>
                <tr id = "2">
                    <th>example2</th>
                    <th>example2</th>
                    <th>example2</th>
                </tr>
                <tr id = "3">
                    <th>example3</th>
                    <th>example3</th>
                    <th>example3</th>
                </tr>
                <tr id = "4">
                    <th>example4</th>
                    <th>example4</th>
                    <th>example4</th>
                </tr>
                <tr id = "5">
                    <th>example5</th>
                    <th>example5</th>
                    <th>example5</th>
                </tr>
                <tr id = "6">
                    <th>example6</th>
                    <th>example6</th>
                    <th>example6</th>
                </tr>
                <tr id = "7">
                    <th>example7</th>
                    <th>example7</th>
                    <th>example7</th>
                </tr>
            </table>
        </div>
        <a href="#!" class=" modal-action modal-close waves-effect 
waves-green btn-flat">Close</a>
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： javascript html charts modal-dialog materialize

【解决方案1】：

勾选这一行，如果你调用模型，默认情况下它调用较小的模态，但有一个较大的模态。我猜你用这个。

<div id="modal1" class="modal modal-lg">//I added modal-lg to the class
    <div class="modal-content">
        <h4>Server's test results</h4>
        <p id = "modalParagraph"></p>
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect 
waves-green btn-flat">Close</a>
        <a href="#modal2" class=" waves-effect waves-light red btn 
modal-trigger">Data</a>
    </div>
</div>

【讨论】：