1

我不知道为什么文本重叠。

这是显示问题的屏幕截图：http:
//i.imgur.com/rLIcww4.png

?1 如您所见，列标题“Subcontratada”是重叠的。

我的代码有什么问题？

这是我的 CSS 代码：

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
    margin: 0 auto;
    clear: both;
    width: 100%;
    table-layout:fixed;
}

table.display thead th {
    padding: 3px 18px 3px 10px;
    border-bottom: 1px solid black;
    font-weight: bold;
    cursor: pointer;
    * cursor: hand;
}


这是我的 HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />

        <title>DataTables Editor example</title>
        <style class="include" type="text/css">
            @import "support/bootstrap/css/bootstrap.css";
            @import "support/bootstrap/dataTables/dataTables.bootstrap.css";
            @import "css/customTable.css";
        </style>

        <script class="include" type="text/javascript" charset="utf-8" src="../../../media/js/jquery.js"></script>
        <script class="include" type="text/javascript" charset="utf-8" src="../../../media/js/jquery.dataTables.js"></script>
        <script class="include" type="text/javascript" charset="utf-8" src="../../TableTools/media/js/TableTools.js"></script>
        <script class="include" type="text/javascript" charset="utf-8" src="../../TableTools/media/js/ZeroClipboard.js"></script>
        <script class="include" type="text/javascript" charset="utf-8" src="../media/js/dataTables.editor.js"></script>

        <script class="include" type="text/javascript" charset="utf-8" src="support/bootstrap/js/bootstrap.js"></script>
        <script class="include" type="text/javascript" charset="utf-8" src="support/bootstrap/dataTables/dataTables.bootstrap.js"></script>
        <script class="include" type="text/javascript" charset="utf-8" src="support/bootstrap/dataTables/dataTables.editor.bootstrap.js"></script>

        <script class="include" type="text/javascript" charset="utf-8" src="./js/custom.js"></script>
    </head>
    <body id="dt_example">
        <div id="mContainer" style="border: red 4px dashed;width:1200px;margin-left:auto;margin-right:auto;">
            <div id="demo"  style="border: blue 4px dashed;width:1200px;">
                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered display" id="example"">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Data</th>
                            <th style="text-align: center;">Tema</th>
                            <th style="text-align: center;">V&iacute;nculo</th>
                            <th style="text-align: center;">Empresa</th>
                            <th style="text-align: center;">Subcontratada</th>
                            <th style="text-align: center;">NDP</th>
                            <th style="text-align: center;">CH</th>
                            <th style="text-align: center;">HHT</th>
                            <th style="text-align: center;">Ger&ecirc;ncia</th>
                            <th style="text-align: center;">Área Solicitante</th>
                            <th style="text-align: center;">CC</th>
                            <th style="text-align: center;">Rateio</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="spacer"></div>

        </body>
    </html>
4

3 回答 3

1

浏览器不会在单词中间打断文本。<br />如果要在单词中间换行，则需要手动插入换行符。或者可能减小该列标题中的字体大小。

于 2013-04-12T20:02:02.283 回答
0

不知道为什么，但是您可以通过在名称之间留出空格来解决此问题

<th style="text-align: center;">Sub contratada</th>
于 2013-04-12T20:02:03.237 回答
0

一些选项

滚动 - 水平： https ://datatables.net/examples/basic_init/scroll_xy.html

或者

响应 式 https://datatables.net/extensions/responsive/

ps：这对我有帮助！

于 2014-11-17T12:41:43.250 回答